react中使用css的5种方式

在React中使用CSS主要有以下五种方式：

1. 单文件组件内部样式（内联样式）
2. CSS模块
3. 全局CSS
4. CSS-in-JS
5. 样式化组件（styled-components）

以下是每种方式的示例代码：

1. 单文件组件内部样式（内联样式）:

const MyComponent = () => {
  const styles = {
    color: 'blue',
    fontSize: '20px'
  };
  return <div style={styles}>Hello World!</div>;
};

2. CSS模块:

/* MyComponent.module.css */
.text-blue {
  color: blue;
}

import styles from './MyComponent.module.css';
const MyComponent = () => <div className={styles['text-blue']}>Hello World!</div>;

3. 全局CSS:

/* global.css */
.text-blue {
  color: blue;
}

在index.html或其他全局包含的CSS文件中引入全局CSS:

<link rel="stylesheet" href="global.css">

const MyComponent = () => <div className="text-blue">Hello World!</div>;

4. CSS-in-JS:

const MyComponent = () => {
  const dynamicStyle = {
    color: 'blue',
    fontSize: '20px'
  };
  return <div style={{...dynamicStyle, ...otherDynamicStyles}}>Hello World!</div>;
};

5. 样式化组件（styled-components）:

import styled from 'styled-components';
const BlueText = styled.div`
  color: blue;
  font-size: 20px;
`;
const MyComponent = () => <BlueText>Hello World!</BlueText>;

每种方式都有其适用场景，选择哪种方式取决于具体需求和项目结构。