ReactJS Tutorial for Beginners - 13 - Styling and CSS Basics

❮ Previous Chapter Next Chapter ❯

---

In this chapter, we are going to learn the basics of styling and CSS in React with an example.

There are many ways to style React components with CSS:

1. Regular CSS stylesheets
2. Inline Styling
3. CSS Modules

1. Regular CSS Stylesheets

Let's start with the first approach using regular CSS stylesheets. Here are the steps to use CSS stylesheets in react components.

1. Create a new file called "index.css" and insert some CSS code in it:

.primary {
  background-color: black;
  color: white;
  font-family: Arial;
  text-align: center;
}

.font-xl {
  font-size: 72px;
}

2. Import the CSS Stylesheet in React component:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class MyComponent extends React.Component {
  render() {
	return (
	  <div>
		 <h1>Hello CSS Style!</h1>
		 <p> Add a little style!.</p>
	  </div>
	);
  }
}

ReactDOM.render(<MyComponent />, document.getElementById('root'));

Note that we have imported index.css at the top in the above file:

import './index.css';

We can also conditionally apply a CSS class based on props or state of the component.

For example:

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';

class MyComponent extends React.Component {
  let className = props.primary ? 'primary' : ''

  render() {
	return (
	  <div>
		 <h1 className = {className } >Hello CSS Style!</h1>
	  </div>
	);
  }
}

ReactDOM.render(<MyComponent primary={true} />, document.getElementById('root'));

2. Inline Styling

To style an element with the inline style attribute, the value must be a JavaScript object.

Let's create a file named inline.js. Within a file, create a functional component called Inline. Within the Inline functional component, we create a JavaScript object with styling information, and refer to it in the style attribute:

import React from 'react'
const heading = {
  fontSize: '72px',
  color: 'orange'
}

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

export default Inline

Note that the style attribute accepts a JavaScript object with camelCased properties rather than a CSS string.

For example: font-size should be camelCased to fontSize.

const heading = {
  fontSize: '72px',
  color: 'orange'
}

We can also directly insert a JavaScript object with the styling information like:

import React from 'react'

function Inline() {
  return (
    <div>
      <h1 style={{ fontSize: '72px', color: 'orange' }}>Inline Styling</h1>
    </div>
  )
}

export default Inline

Note: In JSX, JavaScript expressions are written inside curly braces, and since JavaScript objects also use curly braces, the styling in the example above is written inside two sets of curly braces {{}}.

3. CSS Modules

CSS Modules are convenient for components that are placed in separate files.

The CSS inside a module is available only for the component that imported it, and you do not have to worry about name conflicts.

Let's create the CSS module with the .module.css extension, for example: mystyle.module.css.

.primary{
  color: blue;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}

Import the stylesheet in MyComponent:

import React from 'react';
import ReactDOM from 'react-dom';
import styles from './mystyle.module.css'; 

class MyComponent extends React.Component {
  render() {
    return <h1 className={styles.primary}>Hello CSS Module Style!</h1>;
  }
}

export default MyComponent ;

Import the MyComponent in index.js of React application:

import React from 'react';
import ReactDOM from 'react-dom';
import Car from './App.js';

ReactDOM.render(<MyComponent />, document.getElementById('root'));

What's Next?

In this chapter, we have learned the basics of styling and CSS in React with an example.

---

❮ Previous Chapter Next Chapter ❯