Six ways to write styles in React

In React, there are mainly the following ways to write styles:

1. Inline style:

Use directly in React componentsstyleProperties to define styles. This approach is more suitable for defining dynamic styles, because it allows you to use JavaScript expressions as the value of the style.

2. External style sheet:

Define styles by creating external CSS files and introducing them into React components. This method is more suitable for defining static and reusable styles.

3. CSS Modules：

This is a technology to localize CSS class names, which can effectively avoid class name conflicts. By creating a . file and introducing this file into the React component, you can use the modular CSS class name to define the style.

4. Styled Components：

This is a popular CSS-in-JS library that allows you to write CSS in a componentized way. By creating styled components, you can tightly combine styles and component logic to achieve highly customizable styles.

5. Emotion：

This is another CSS-in-JS library, similar to Styled Components, but provides more flexibility and scalability. Emotion supports multiple syntaxes, including object styles, template string styles and CSS style sheets, which can meet different writing needs.

6. Radium：

This is an inline style library for React that provides more functionality and convenience. In addition to supporting basic inline styles, Radium also supports advanced features such as pseudo-classes and media queries, which allows you to manage styles more easily.

It should be noted that the above methods are not mutually exclusive. You can choose the appropriate method to write styles based on project needs and personal preferences. At the same time, the React community is still growing, and new styles of writing may appear.

In addition, for large projects and teams, a strategy that combines multiple styles of writing may be adopted to achieve better maintainability and scalability. For example, external stylesheets can be used to define global, shared styles, while CSS-in-JS library can be used to define component-level, highly customized styles.

The following detailed code example

Below I will give detailed code examples for the 6 ways mentioned above:

1. Inline style

function MyComponent() {
  const myStyle = {
    color: 'blue',
    backgroundColor: 'lightgrey',
    padding: '10px',
    borderRadius: '5px'
  };

  return <div style={myStyle}>This is an inline styled div.</div>;
}

2. External style sheet

Suppose you have onedocument:

/*  */
.my-class {
  color: green;
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

Then introduce and use it in the React component:

import React from 'react';
import './'; // Introduce external style sheet
function App() {
  return <div className="my-class">This div uses external CSS.</div>;
}

export default App;

3. CSS Modules

Suppose you have onedocument:

/*  */
.myStyledDiv {
  color: purple;
  background-color: pink;
  padding: 15px;
  border: 1px solid black;
}

Then introduce and use it in the React component:

import React from 'react';
import styles from './'; // Introduce CSS Module
function MyComponent() {
  return <div className={}>This div uses CSS Modules.</div>;
}

export default MyComponent;

4. Styled Components

First, you need to install itstyled-componentsLibrary:

npm install styled-components

Then write the component:

import React from 'react';
import styled from 'styled-components';

const StyledDiv = `
  color: orange;
  background-color: white;
  padding: 25px;
  border: 2px dashed black;
`;

function MyStyledComponent() {
  return <StyledDiv>This div uses Styled Components.</StyledDiv>;
}

export default MyStyledComponent;

5. Emotion

First, you need to install it@emotion/reactand@emotion/styledLibrary:

npm install @emotion/react @emotion/styled

Then write the component:

import React from 'react';
import styled from '@emotion/styled';

const StyledDiv = `
  color: brown;
  background-color: lightgreen;
  padding: 10px 20px;
  border: 1px solid darkgrey;
`;

function MyEmotionComponent() {
  return <StyledDiv>This div uses Emotion.</StyledDiv>;
}

export default MyEmotionComponent;

6. Radium

First, you need to install itradiumLibrary:

npm install radium

Then write the component:

import React from 'react';
import Radium from 'radium';

const MyStyledDiv = Radium(({
  render() {
    return (
      <div style={[
        ,
        
      ]}>
        This div uses Radium.
      </div>
    );
  }
}));

const styles = {
  base: {
    color: '#fff',
    padding: '20px',
    borderRadius: '4px'
  },
  primary: {
    backgroundColor: '#0074d9'
  }
};

function MyRadiumComponent() {
  return <MyStyledDiv />;
}

export default MyRadiumComponent;

Please note that the above Radium example uses it, which is the way to create class components in React in the early days. Now it is recommended to use ES6 class syntax or function components and Hooks. However, to demonstrate the usage of Radium, it is still used here. In actual projects, you should use function components or class components to combine them with Radium.

Radium may not be the most popular option right now, as React's ecosystem has developed many other CSS-in-JS libraries, and React itself has improved in styles. However, understanding Radium still helps to understand the concept and usage of CSS-in-JS.

The above is the detailed content of six ways to write styles in React. For more information about writing styles in React, please pay attention to my other related articles!