5 Best Way To Style React Components

JavaScript literally gave birth to multiple frameworks where each attracting a millions of developers community every day. As part of the development, our JavaScript developers often release blogs & articles about the new tricks & best practices about all the frameworks we serve. On the list, today our React.Js experts who has great exposure on React decided to produce the ultimate list of 5 best way to style react components.

 

In React, there are different approaches to style the Components. Each approach has it’s benefits and drawbacks. So choosing a single approach won’t serve the purpose. So, in order to meet destined requirement, we must try to use multiple way to find best method and should know to style them accordingly wherever it is appropriate. Let’s explore each approaches with the example.

 

1. Inline Styles

Inline style is the React’s inbuilt approach to style the component in which we can add the inline CSS with the style attribute. The style attribute will accept a JavaScript object with camelCase property as a key whose value is the style’s value.

 

Link for inline-styles.txt

 

const headingStyles = {

color: '#fff',

backgroundColor: '#03a87c'

};

const heading = () => {

return <h1 style={headingStyles}>Hello World</h1>;

};

 

In the above example, we have created a variable headingStyles to store all the h1 element’s styles in camelCased JavaScript object. Later, that styles can be passed to the h1 element through the style attribute like,

 

style={headingStyles}

And we can also directly pass the element like below,

 

Link for direct-inline-styles.txt

 

const heading = () => {

return <h1 style={{color: '#fff', backgroundColor: '#03a87c'}} >Hello World</h1>;

}

 

Drawbacks of this approach are,

  • Unable to use the pseudo-classes(:hover, :active, :focus, ::before, ::after etc).
  • Can’t able to use media queries for Responsive components.
  • Can’t use vendor specific styles like -webkit-, -moz-, -ms- and -o-.
  • Duplication of code is possible.

 

2. CSS Stylesheet

Writing styles in an external CSS file and importing them in your components is another approach used in React, through which we can create a separate stylesheet for each component.

 

In JSX (roundedButton.jsx), className prob is used to add the class value to the element instead of the class attribute.

 

Link for roundedButton.jsx

 

import React from "react";

import "./RoundedButton.css";

const RoundedButton = props => (

<button className="roundedButton">{props.children}</button>

);

export default RoundedButton;

 

Here the styles for the RoundedButton Component is imported from roundedButton.css.

 

Link for roundedButton.css

 

.roundedButton {

color: #fff;

background-color: rgb(225, 0, 80);

border-radius: 10px;

padding: 10px 20px;

border: 0;

cursor: pointer;

}

.roundedButton:hover {

background-color: rgb(181, 2, 66);

}

 

To use this CSS stylesheet in react, webpack has to be configured with css-loader and style loader. Also, keep in mind that the projects which are created with create-react-app will have these loaders by default.

 

Advantages:

  • Style and content are separated.
  • Easy to maintain the modularity by creating a separate CSS file for each component and group the component and css in a single folder structure.

 

3. CSS Modules

According to the module definition here (https://github.com/css-modules/css-modules), A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.

This is similar to writing styles in an external CSS file and importing them into the component. The only difference here is the styles are locally scoped to avoid the collisions of styles with other styles.

 

To brief it clearly, you can see the below examples to note how we have locally scoped the styles to avoid collisions,

 

Link for Button.css

 

.error {

background-color: red;

}

 

Link for another-stylesheet.css

 

.error {

color: red;

}

 

Link for button.jsx

 

import React, { Component } from 'react';

import styles from './Button.css'; // Import css modules stylesheet as styles

import './another-stylesheet.css'; // Import regular stylesheet

class Button extends Component {

render() {

// reference as a js object

return <button className={styles.error}>Error Button</button>;

}

}

 

Result

The rendered DOM has no clashes from other .error class names.

 

<!– This button has red background but not red text →

 

<button class="Button_error_ax7yz">Error Button</button>

 

The processed Button.css will be like,

 

.Button_error_ax7yz{

background-color: red;

}

 

During our build step, the compiler would search through that button.css file which we’ve imported, then looks through the JavaScript code we’ve written to make the .error class accessible via styles .error. Our build step would then process both these things into new, separate HTML and CSS files, with a new string of characters by replacing both the HTML class and the CSS selector class.

 

CSS Modules allows the scoping of CSS by automatically creating a unique class name of the format [filename]\_[classname]\_\_[hash].

 

Related: Top 10 React Components Libraries Every Javascript Developers Must Know

 

4. Styled Components

Styled-components are created by defining the components with the help of ES6 template literal notation. CSS properties can be added in the component, just like how you do it using CSS. Therefore, all the styled-components will be generating the unique class names when the JS is parsed, and also it helps to inject the CSS into the DOM.

 

Installing Styled component module

 

npm install styled-components

 

Importing styled-components in React component

 

import styled from "styled-components"

 

Link for styled-components.jsx

 

import React from "react";

import styled from "styled-components";

const RoundedButton = styled.button`

/* Adapt the colors based on primary prop */

background: ${props => props.primary ? "palevioletred" : "white"};

color: ${props => props.primary ? "white" : "palevioletred"};

font-size: 1em;

margin: 1em;

padding: 0.25em 1em;

border: 2px solid palevioletred;

border-radius: 3px;

`;

render(

<div>

<RoundedButton>Normal</RoundedButton>

<RoundedButton primary>Primary</RoundedButton>

</div>

);

 

In the above example, we have created a RoundedButton styled component. This component will create a button element with all the styles applied. Based on the primary prop, the background color and font color is changed.

 

The main advantage of this styling method can write pure CSS. JavaScript template literals that help us to use the full power of CSS to style components.

 

Go through the below link for more details.

 

5. CSS Preprocessors

CSS Preprocessors are tools that converts non-CSS language into CSS, whereas most preprocessors using languages that are similar to CSS or an extension of it. Here the ultimate goal of a preprocessor is to provide a syntax that has more features, more readable or which requires less typing.

 

Flowing are few preprocessors available to style React components,

 

  • SASS/SCSS
  • LESS
  • Stylus

 

Also read: Build A Web App With React.js And GraphQL

 

The End

Styling React components becomes a critical part of the development workflow. Choosing the best styling option has to be done based on the modularity and scalability. Instead of sticking to a single method of styling, try to use the combination of all these styling methods on your next projects and let us know your results & queries in the comment section.

 

Contact form 7 Mailchimp extension by Renzo Johnson - Web Developer