3 ms·
That's also what we do here on a dozen of apps and it works. Each component has its own folder with its own css file and each rule starts with .name-of-the-com
by ggregoire 8y ago
That's also what we do here on a dozen of apps and it works.
Each component has its own folder with its own css file and each rule starts with .name-of-the-component.
For dynamic properties, we either create conditional classes (e.g. 'success', 'error') or pass the rules through 'style' (e.g. dynamic height).
For dynamic themes, we create an object at the root of the app
const theme = { header: { backgroundColor: black }, button: { backgroundColor: black }, ... }
Then pass it down to the related components
<header className="default-header" style={theme && theme.header}>
<button className="default-button" style={theme && theme.button}>
That being said, I tried styled-components once and don't really have negatives about it. It's a viable option.