React 组件引用样式的多种方法

在React中，声明组件样式可以通过多种方式实现，下面是一些常见的方法：

1. 内联样式 (Inline Styles)

内联样式是将CSS样式直接作为JavaScript对象传递给组件的style属性。这种方式简单直接，但不适合复杂的样式。

const MyComponent = () => {
  const inlineStyle = {
    color: 'blue',
    fontSize: '14px',
  };

  return <div style={inlineStyle}>这是一个使用内联样式的组件</div>;
};

2. CSS-in-JS 库

使用CSS-in-JS库，如styled-components或emotion，可以让你在JavaScript中编写CSS样式，并将其应用到组件上。

import styled from 'styled-components';

const MyStyledDiv = styled.div`
  color: blue;
  font-size: 14px;
`;

const MyComponent = () => {
  return <MyStyledDiv>这是一个使用CSS-in-JS库的组件</MyStyledDiv>;
};

3. 模块化CSS

通过CSS模块，你可以将样式定义在一个单独的.css文件中，并使用className属性将其应用到组件上。CSS模块允许你定义局部作用域的样式，避免全局污染。

/* MyComponent.module.css */
.myComponent {
  color: blue;
  font-size: 14px;
}

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

const MyComponent = () => {
  return <div className={styles.myComponent}>这是一个使用模块化CSS的组件</div>;
};

4. 传统的CSS文件

你可以创建一个普通的CSS文件，并在组件中通过import语句导入。然后使用className将样式类应用到组件上。

/* styles.css */
.myComponent {
  color: blue;
  font-size: 14px;
}

import './styles.css';

const MyComponent = () => {
  return <div className="myComponent">这是一个使用传统CSS文件的组件</div>;
};

5. 使用CSS预处理器

如果你喜欢使用Sass、Less等CSS预处理器，可以配置Webpack或你的构建系统来处理这些文件，并将它们编译成普通的CSS文件。

// MyComponent.scss
.myComponent {
  color: blue;
  font-size: 14px;
}

import './MyComponent.scss';

const MyComponent = () => {
  return <div className="myComponent">这是一个使用Sass的组件</div>;
};

选择哪种方式声明组件样式取决于你的项目需求、团队偏好和构建配置。每种方法都有其优缺点，例如内联样式易于调试但难以维护，CSS-in-JS提供了强大的样式封装和复用能力，而传统的CSS文件易于编写和阅读，但可能引入全局样式冲突。