React.js – Component Styling

There are a number of ways you can style React component. We’ll cover three of them.

1. Introduction
2. CSS Stylesheet
3. Conditionally Applying a Style
4. Specifying Multiple Classes
5. Inline Styling
6. CSS Modules

1. Introduction

If you notice in the previous examples, you will notice that we have not explicitly applied any style. However, a style is applied automatically to the root component, App.js. When you create a react app, a base Stylesheet, App.css is created. This stylesheet contains styles that are applied to the App component and any other sub-component. So you can modify this file and the changes will affect all your components. But now, let’s see how you can apply styles to particular components.

2. CSS Stylesheet

You can create a new stylesheet that would hold your custom styles. I call this myStyles.css. Then I also create a component called StylesDemo.js. Then import the stylesheet into the component.

The stylesheet contains only one style primary as shown below

.primary{
    color:blue;
}

.secondary{
    color: red;
}

We apply the style to the component by: adding the style to the imports and applying it to an element. The StylesDemo component is shown below:

import React from 'react'
import './myStyles.css'

function StylesDemo() {
    return (
        <div>
            <h1 className="primary">React Styles</h1>
        </div>
    )
}

export default StylesDemo

If you view the page you’ll see the style applied.

3. Conditionally Applying a Style

You can also conditionally apply a style based on the value of state or props. In the example below, the App component passes the props primary with a value of false.

In the StylesDemo component, we check the value of props, if it is true, we apply primary, else apply secondary.

App.js component

function App() {
  return (
    <div className="App">
      <StylesDemo primary={true}></StylesDemo>
    </div>
  );
}

StylesDemo.js component

function StylesDemo(props) {
let className = props.primary ? 'primary' : 'secondary'
return (
    <div>
        <h1 className={className}>React Styles</h1>
    </div>
)
}

Try to change the value of the props between true and false and check the result.

4. Specifying Multiple Classes

A good option is to use template literals. So create a second class in the myStyles.css file. I call it tertiary. So we’ll apply both primary and tertiary to an element. So in the component, we change the value of the classname to template literal using backticks (`). The return statement now looks like this:

return (
    <div>
        <h1 className={`${className} tertiary`}>React Styles</h1>
    </div>
)

This allows the two styles to be applied.

5. Inline Styling

We can also apply a style inline. Inline styles are specified with an object whose key is the camelCase version of the style name and the value is usually a string.

The component below makes use of inline styling:

import React from 'react'

//Inline style defined here
const heading = {
    fontSize: '70px',
    color: 'red'
}

function Inline() {
    return (
        <div>
            <h1 style={heading}>Inline Styling</h1>
        </div>
    )
}

export default Inline

6. CSS Modules

This feature is available from React version 2 and higher. The file naming convention for CSS module is that the filename must be suffixed with .module.css.

So if appStyle.css is a regular stylesheet, then the module file is named appStyle.module.css. Create these files and add some styles to them.

Then import them to App.js component. Notice the difference in the imports:

import './components/appStyles.css' //regular style import
import styles from './components/appStyles.css'  //module style import

The different ways to access the styles are shown below:

function App() {
  return (
    <div className="App">
      <h1 className='error'>From regular css</h1>
      <h1 className={styles.success}>From module css</h1>
    </div>
  );
}