I am rewriting 1 of my vanilla websites into next js. I am having a problem with the styling of my navigation component. I think I narrowed it down to what the problem is, I’m just not quite sure why it’s happening.
I am using react bootstrap with custom CSS. It seems that the bootstrap component style is overriding my custom CSS. You really notice it when you select 1 of the navigation items. It’s only using the bootstrap CSS.
This is what my navigation bar is supposed to look like: https://i.imgur.com/Jckl5ZR.png
Here is the console output: https://i.imgur.com/uu4wGEb.png
Now when I try to rewrite this into my next.js application I get something that looks like this: https://i.imgur.com/QkD3cMA.png
As you can see, the CSS I have written is not being recognized at all. I have a feeling bootstrap react is overriding but I’m not sure what I’m supposed to do. Below I will link a picture of my package.json and a gist of the component itself.
P.S. I know why the brand part of the navigation bar is not styled right. I am more worried about why my anchor tag is not being styled.