[Translation] 4 ways to style React components
Hi, Habr! I present to your attention the translation of the article "4 Ways to Style React Components" .
To date, many ways of styling React components have been developed. From libraries to using traditional СSS files. The choice is quite extensive and is likely to match your preferences. Here are four ways to style React components.
Because JSX is converted to HTML elements, this allows the style attribute to be used. Styles can be applied to elements by simply passing them an object with properties. It will look something like this:
However, this method is very limited. It cannot use pseudo-selectors, such as: hover, and media queries. But this does not mean that it should not be used. It can be used when there are only 2 or 3 properties that do not require pseudo-selectors or media queries, and / or in situations where the use of conditions in styles is required.
I like to just learn new libraries or frameworks. This method is my favorite for styling React components. There are many styling libraries that allow you to not only stylize components, but also provide additional “super-capabilities,” as I call them, along with all the CSS features that greatly simplify everything.
The usage example might look like this: The
above is an example of using the styled-components library.
The wrapper is called the styled component. Styles are defined in the Wrapper constant, which simply creates a component with these styles. Just determine what type of element you need, for example: div, header, or img, - and use it as if it were a React component. Not HTML elements, just components, which makes the code more clean and easy to read.
This is just my preference. Maybe you like to use a div, or see native HTML elements. No problem! Khan Academy developed the Aphrodite library, which uses HTML elements, but attaches styles to a component using the className attribute.
My article about Aphrodite
These libraries also have many advanced features that allow you to do amazing things. There are many libraries, so you just need to try and see which will stay with you.
Here are the two most popular at the moment:
https://www.styled-components.com/
https://glamorous.rocks/
You can write styles in an external CSS file and import them into the component, where necessary. It was probably the first way that you learned when you started learning React. However, adding additional elements poses a problem with their naming. All styles are in global skoupe. For example, you had two elements with the same name, created by you or your teammate, in this case you may encounter this problem.
CSS modules are very similar to writing CSS in external files. The only difference is that the styles are encapsulated, in contrast to the traditional use of external CSS files. This means that styles will not conflict with each other or overwrite each other. You use the same methods that are used in traditional CSS. It also allows the use of all good methodologies such as BEM. You can read more here:
https://github.com/css-modules/css-modules
Whatever you decide to use: traditional CSS, CSS modules, Inline CSS, styling libraries, or a combination of these methods - in my opinion it all comes down to your preferences and the preferences of your team.
Thanks for reading. Found a bug? Feel free to tell me about it. Have a nice day!
To date, many ways of styling React components have been developed. From libraries to using traditional СSS files. The choice is quite extensive and is likely to match your preferences. Here are four ways to style React components.
Inline CSS
Because JSX is converted to HTML elements, this allows the style attribute to be used. Styles can be applied to elements by simply passing them an object with properties. It will look something like this:
However, this method is very limited. It cannot use pseudo-selectors, such as: hover, and media queries. But this does not mean that it should not be used. It can be used when there are only 2 or 3 properties that do not require pseudo-selectors or media queries, and / or in situations where the use of conditions in styles is required.
Styling Libraries
I like to just learn new libraries or frameworks. This method is my favorite for styling React components. There are many styling libraries that allow you to not only stylize components, but also provide additional “super-capabilities,” as I call them, along with all the CSS features that greatly simplify everything.
The usage example might look like this: The
above is an example of using the styled-components library.
The wrapper is called the styled component. Styles are defined in the Wrapper constant, which simply creates a component with these styles. Just determine what type of element you need, for example: div, header, or img, - and use it as if it were a React component. Not HTML elements, just components, which makes the code more clean and easy to read.
This is just my preference. Maybe you like to use a div, or see native HTML elements. No problem! Khan Academy developed the Aphrodite library, which uses HTML elements, but attaches styles to a component using the className attribute.
My article about Aphrodite
These libraries also have many advanced features that allow you to do amazing things. There are many libraries, so you just need to try and see which will stay with you.
Here are the two most popular at the moment:
https://www.styled-components.com/
https://glamorous.rocks/
Exterior styles
You can write styles in an external CSS file and import them into the component, where necessary. It was probably the first way that you learned when you started learning React. However, adding additional elements poses a problem with their naming. All styles are in global skoupe. For example, you had two elements with the same name, created by you or your teammate, in this case you may encounter this problem.
CSS modules
CSS modules are very similar to writing CSS in external files. The only difference is that the styles are encapsulated, in contrast to the traditional use of external CSS files. This means that styles will not conflict with each other or overwrite each other. You use the same methods that are used in traditional CSS. It also allows the use of all good methodologies such as BEM. You can read more here:
https://github.com/css-modules/css-modules
Whatever you decide to use: traditional CSS, CSS modules, Inline CSS, styling libraries, or a combination of these methods - in my opinion it all comes down to your preferences and the preferences of your team.
Thanks for reading. Found a bug? Feel free to tell me about it. Have a nice day!