Different Ways to Style Components in React
When it comes to style components in react applications we have a variety of options in our hand. Here, I am going to discuss the three most popular styling options that you can use inside your projects.
Inline Styles
This is the most basic way of styling components and typically you work with styling this way when getting started with react. In inline styling, the style object will be passed as a style prop object directly into the JSX element and this has key-value pairs of CSS rules and values that are assigned to those CSS rules. Also, when we writing CSS rules inside the JavaScript object we have to address the rules in camel case letters. Otherwise, we can create an object with these CSS styles and pass it into the style prop. This style prop will be translated into inline style and will be applied to the button element (refer to the example below). This approach is useful to add some styles for one element to test something or get quick styling on to an element. This method does not have reusability at all. Also, this will mess up the code because styles and JavaScript are inside the same file also harder to debug if we have inline styling in all the elements. Another issue we have faced with this styling method is the there is no way to defining pseudo-elements or classes. I think you should avoid this method if you are going to use a considerable amount of CSS rules inside your component.
External CSS Styles
This way is useful when you want to split your JavaScript and CSS and write pure CSS in another file that we used to do. In this method, CSS will be injected into the index.html and if you do not uses different classes styles will apply globally to the same elements. Refer to the pictures below for a better understanding. Here, I created an App.css file and wrote the CSS rules there, and import it to the component. Then styles will be applied to all the buttons because I used a global selector for the buttons.
This global styles applying issue can be eliminated by using CSS modules. We just have to rename the App.css as App.module.css. then import it to the component and save styles to a variable then use that variable to apply styles to the elements that are needed. Refer to the example below to make it more clear.
Third-Party Libraries
We can use third-party packages to create styles for our application. I am going to discuss one of the most popular packages, the styled-components library, which allows us to create JSX components with styles using the JavaScript feature called template literals.
First, we have to install styled components using npm by typing “npm install styled-components”. then import to the component and start creating components as below. for more references, read the styled-components documentation here.
The drawback of this way is the all the styles are scrambled into the component. the more we apply the styling the component’s code will get bigger and bigger. I personally prefer to use the external styles method by using separated CSS files. that way I can be more organized by splitting the code. Now, I hope you have a good understanding of some of the options that you can use to style the components in react. Hopefully, this was helpful, see you in the next one 👋.
