React中如何将CSS Modules的className传递给自定义组件

当然可以这么做，而且这是CSS Modules的常见用法之一，既能保持样式隔离，又能让自定义组件复用外部传入的样式。

具体实现步骤： #

1. 父组件中传递隔离类名
   直接把CSS Modules导出的唯一类名通过className属性传给自定义组件，就像你给出的代码示例那样：

import styles from './ParentComponent.module.css';
import CustomComponent from './CustomComponent';

function ParentComponent() {
  return <CustomComponent className={styles.foo} />;
}

这里styles.foo是经过CSS Modules处理后的独一无二的类名，不会和其他组件的样式冲突。

2. 自定义组件中接收并应用类名
   自定义组件需要接收className属性，然后将它应用到内部的根元素（或你需要的目标元素）上，还可以和组件自身的默认类名合并：

// CustomComponent.jsx
import componentStyles from './CustomComponent.module.css';

function CustomComponent({ className, ...props }) {
  // 合并自身默认类名和外部传入的类名
  const finalClassName = `${componentStyles.root} ${className || ''}`;
  return <div className={finalClassName} {...props}>自定义组件内容</div>;
}

export default CustomComponent;

• 如果组件自身没有默认类名，直接用传入的className即可；
• 用...props可以传递其他属性，保证组件的灵活性。

3. 多类名传递技巧
   如果需要传递多个隔离类名，直接用空格拼接即可：

<CustomComponent className={`${styles.foo} ${styles.bar}`} />

也可以用classnames这类工具库简化多类名的拼接逻辑，但不是必需的。

内容的提问来源于stack exchange，提问作者SpritS