Styling React Applications
A modern UI developer has a lot of different options when it comes to styling applications. The traditional approach of creating a few Cascading Style Sheets (CSS) files and including them is not great for scaling or for building a unified presentation layer. Modern web applications and React in particular offer so many different options for styling that we can't hope to cover all of them. Here are a few popular techniques.
Master Stylesheet
We have a styles.css
file with all the styles. Styles are global and will affect all components. This can work very well for a small application but has some serious scaling problems as you add more styles and components. When new styles are added, we may start to see existing components break as they are influenced by the new styles.
Component-Scoped Styles
With this approach, we create a style for each component that needs styling and use the import
keyword to add the style to your component. A...