1. 传统 CSS 文件

使用普通的 CSS 文件来定义样式，并在组件中引入。

/* styles.css */
.container {
  background-color: lightblue;
  padding: 20px;
}

// MyComponent.jsx
import './styles.css';

const MyComponent = () => {
  return <div className="container">Hello, World!</div>;
};

2. CSS Modules

CSS Modules 允许你为每个组件使用局部作用域的 CSS，避免全局命名冲突。

/* styles.module.css */
.container {
  background-color: lightblue;
  padding: 20px;
}

// MyComponent.jsx
import styles from './styles.module.css';

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

3. Styled Components

使用 Styled Components 库，可以通过 JavaScript 定义组件的样式，支持动态样式。

npm install styled-components

// MyComponent.jsx
import styled from 'styled-components';

const Container = styled.div`
  background-color: lightblue;
  padding: 20px;
`;

const MyComponent = () => {
  return <Container>Hello, World!</Container>;
};

4. Emotion

npm install @emotion/react @emotion/styled

// MyComponent.jsx
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

const style = css`
  background-color: lightblue;
  padding: 20px;
`;

const MyComponent = () => {
  return <div css={style}>Hello, World!</div>;
};

5. 内联写法

在 React 中，可以直接在组件中使用内联样式，样式以对象形式传递。

// MyComponent.jsx
const MyComponent = () => {
  const style = {
    backgroundColor: 'lightblue',
    padding: '20px',
  };

  return <div style={style}>Hello, World!</div>;
};

6. Tailwind CSS

// MyComponent.jsx
const MyComponent = () => {
  return <div className="font-bold bg-lightblue p-5">Hello, World!</div>;
};

总结

传统的 CSS 文件适用于简单项目，而 CSS Modules、Styled Components、Emotion 等更适合大型项目，提供更好的模块化和可维护性。Tailwind CSS 适合喜欢实用优先风格的开发者。