React Using CSS Styles

There are multiple ways to use CSS in React applications.

The following are some common methods and detailed instructions on how to implement them in React.

Inline Styles

In React, using CSS styles directly on elements is achieved through inline styles.

Inline styles pass CSS styles directly to the element's style attribute as an object. Each style property is written in camelCase instead of the traditional CSS property name.

Use directly inside the element:

Example

import React from 'react';
import ReactDOM from 'react-dom/client';

const Header = () => {
  return (
    <>
      <h1 style={{color: "red"}}>Hello Style!</h1>
      <p>Add a little style!</p>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);

You can also create an object with style information and reference it in the style attribute:

Example

import React from 'react';
import ReactDOM from 'react-dom';

const MyComponent = () => {
  // Define inline style object
  const containerStyle = {
    padding: '20px',
    backgroundColor: '#f0f0f0'
  };

  const titleStyle = {
    fontSize: '24px',
    color: '#333'
  };

  return (
    <div style={containerStyle}>
      <h1 style={titleStyle}>Hello, world!</h1>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent />);

In the above example, containerStyle and titleStyle are two inline style objects applied to the div and h1 elements respectively. Here are the key points:

  • Use camelCase for CSS properties (e.g.,backgroundColorinstead ofbackground-color）。
  • All style property values are passed as strings (except numeric values, which can be used directly and React will automatically add units).

Inline styles can also change dynamically based on the component's state:

Example

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const MyComponent = () => {
  const [isHighlighted, setIsHighlighted] = useState(false);

  const containerStyle = {
    padding: '20px',
    backgroundColor: isHighlighted ? '#ffff99' : '#f0f0f0'
  };

  const titleStyle = {
    fontSize: '24px',
    color: '#333'
  };

  return (
    <div style={containerStyle}>
      <h1 style={titleStyle}>Hello, world!</h1>
      <button onClick={() => setIsHighlighted(!isHighlighted)}>
        Toggle Highlight
      </button>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent />);

Using Style Files

You can write CSS styles in a separate file, simply use the.cssfile extension to save the file, then import it into your application.

Create a style file named App.css and add the following CSS code:

Example

body {
  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Sans-Serif;
  text-align: center;
}

In your application, import the style App.css:

Example

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

const Header = () => {
  return (
    <>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);

CSS Modules

Another way to add styles to an application is to use CSS Modules.

CSS Modules is a locally scoped CSS file naming convention. With this approach, CSS class names and animation names are scoped locally by default.

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

Use the.module.cssextension to create CSS Modules, for example: MyComponent.module.css.

Example

/* MyComponent.module.css */
.container {
  padding: 20px;
  background-color: #f0f0f0;
}

.title {
  font-size: 24px;
  color: #333;
}

Import the stylesheet in the application:

Example

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

const MyComponent = () => {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello, world!</h1>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent />);
Other Extensions