Styling Components with SASS
Hello there,
I am working an a Portfolio Website for a friend.
I've decided to do it in React.js. And I am having some trouble with styling using SASS.
I've created a separate reusable component with props,
<Button />, that goes inside the <Nav /> component.
I've created a _button.scss file for the button, there are four buttons inside the nav and I left the styles for each individual <Button /> component inside the _nav.scss.
Which are selected by using the class.
Though, the styles don't show up for each unique button, just for the general button style.
And I believe this is because the class name is being populated by the use of props in the <Button /> component, so the .scss can't pick up the class name in the html because it a whole component in the jsx.
I could just go back and not have the button as a separate component and keep all the styles in the _nav.scss and the selectors for the class names will be fine.
Let me know what you think.
Thanks.5 Replies
You are targeting specific classes that don't exist in the buttons inside the navbar.
However I would recommend using styles components library for this as it would avoid many of these headaches. https://styled-components.com/
Didn't change the selector class names. Haha
Alright cool. It's got some color now
One more thing I just realized, you're using "name" to create variants of your buttons but that's an existing HTML attribute as well so it can be confusing and limit your flexibility later on. You may want to use something else like "variant" or something.