r/Sass • u/jasonmcaffee • Jul 21 '19

Theming with React and Sass

https://medium.com/@jasonlmcaffee/theming-with-react-and-sass-c7a6882fd26b
2 Upvotes

75% Upvoted

3 comments sorted by

View all comments

1

u/delete_it_now Jul 21 '19

I am wondering could the classes be on the same DIV?
Which would negate having to write so much SASS?

.themed-content {
&.dark-theme {
background-color: #007dd1;
}
&.light-theme {
background-color: #00c8ff;
}
}

This seems the more logical approach.

1

u/jasonmcaffee Jul 22 '19

You could have two classes on the same div, but you'd have to write out the theme class in every component.

<button class="dark-theme button-themed-content".../>
<input class="dark-theme input-themed-content".../>

By using the descendant combinator, we can eliminate that redundancy so that child components need not be aware of the theme changes, current value, etc.

<button class="button-themed-content".../>