Styling is one of the most important aspects of building modern user interfaces. In front-end development, emphasis is placed on creating sleek and visually appealing user interfaces that attract users to your application.

React, being a component-based library, offers several ways to manage and apply styles. The flexibility of styling approaches in React allows you to choose the method that best suits your application's needs and personal preferences.

Applying these styling methods are straight-forward and not too different from what you are accustomed to.

In this lesson, we'll explore traditional ways of styling in React.

Using External Stylesheet

The most traditional way to style React components is by using external CSS files. It involves creating .css files and linking them to React components by importing them.

Example

Say we want to render and style a button on our webpage, we can achieve that using external stylesheet method:

1. Create a component and return a button element

function App(){
  return(
    <button className="button">Click me</button>
  )
}

2. Create a .css file and style the button with className of button

.button{
  background-color: blue;
  color: white;
  padding: 10px;
}

• In this code, we set the background color of the button to blue and the text color to white.

3. Import the .css file (e.g. style.css) into the component file.

import './styles.css';

function App(){
  return(
    <button className="button">Click me</button>
  )
}

Output

This is how the component renders on the browser:

Using CSS Modules

Another way to apply styling in React is by using CSS modules. It scopes the styles to individual components by default. They help avoid global styles and promote a more modular, maintainable approach to styling.

Example

In order to use CSS modules with React, we need to:

• Create a file with the .module.css extension (e.g. Button.module.css).
• Inside the .module.css file, you write your CSS code.

.button{
  background-color: green;
  color: white;
  margin-left: 500px;
  margin-top: 80px;
  padding: 10px;
}

• Import the CSS Module file, and you'll get an object where each key corresponds to a class name, which you can use as a reference to apply the styles.

import styles from './Button.module.css';

export default function Button(){
return (
    <button className={styles.button}>
      Click Me
    </button>
  );
};

Using CSS Modules with Sass

If you want to use Sass or SCSS, you can also use CSS Modules by naming your files with the .module.scss extension, style and import it into the component just like the above example.

import styles from './Button.module.scss';

export default function Button(){
return (
    <button className={styles.button}>
      Click Me
    </button>
  );
};

Using Inline Styling with Style Prop

Inline styling allows you to define styles directly within the JSX of a component. This can be done by passing a style object to a component's style prop.

The style values are written in camelCase instead of CSS syntax and surrounded by double curly brackets {{ }}.

Double curly brackets are required when using the style prop because the style attribute in JSX expects an object, and the outer curly braces denote JavaScript expressions.

Example

export default function App(){
  return(
    <button style={{backgroundColor:"green", color:"white"}}>Click me</button>
  )
}

In this example:

• The button's style is set to a background color of green and text color of white.

Another way of using the style prop is by declaring an object within a component, setting its properties and values, and then passing the object to the style prop of the element being returned.

export default function App(){
  const buttonStyles = {
    backgroundColor:'green',
    color:'white'
  }

  return(
    <button style={buttonStyles}>Click me</button>
  )
}

Notice that there are no double curly brackets added to the style prop value, this is because the buttonStyles is already an object.

Inline styling is straightforward but can make your code look messy, especially if you're dealing with a lot of code.