react css

// React CSS 示例代码

// 1. 使用内联样式
const styles = {
  color: 'blue',
  fontSize: '24px'
};

function InlineStyleExample() {
  return (
    <div>
      <h1 style={styles}>这是使用内联样式的标题</h1>
    </div>
  );
}

// 2. 使用类名 (CSS Modules)
import styles from './App.module.css';

function CssModuleExample() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>这是使用 CSS Modules 的标题</h1>
    </div>
  );
}

// 3. 使用 styled-components
import styled from 'styled-components';

const Title = styled.h1`
  color: green;
  font-size: 28px;
`;

function StyledComponentExample() {
  return (
    <div>
      <Title>这是使用 styled-components 的标题</Title>
    </div>
  );
}

解释说明：

1. 内联样式：通过 JavaScript 对象定义样式，并直接应用到 JSX 元素的 style 属性上。这种方式适合简单的样式，但不适合复杂的样式管理。
2. CSS Modules：通过导入 CSS 文件并使用类名的方式应用样式。CSS Modules 会自动为每个类名生成唯一的名称，避免全局样式冲突。
3. styled-components：一种流行的 CSS-in-JS 库，允许你用标签模板字符串的方式编写样式，并将其与组件紧密耦合。这种方式使得样式和组件逻辑更加一体化，便于维护。

如果你需要更多关于 React 和 CSS 的内容，请告诉我！