React组件如何正确使用.scss模块 多组件复用样式最佳实践

首先明确：你当前在父子组件中重复引入同一份.module.scss的写法不存在性能问题，属于CSS Modules的标准合规用法。构建工具（Vite/Webpack等）处理CSS Modules时，同一份样式模块只会被解析、注入DOM一次，不会因为多次import就重复打包、重复加载样式，不需要担心冗余问题。

如果想要优化代码维护性，在不使用props.children的前提下，有两种更推荐的实现方案，你可以根据组件的耦合程度选择：

• 方案1：强耦合父子组件直接透传样式模块对象
  如果你拆分的LeftControls、CenterControls、RightControls本身就是AudioPlayer的专属子组件，永远不会脱离AudioPlayer单独复用，完全不需要每个子组件单独引入样式文件，直接在父组件引入后通过props传给子组件即可。
  父组件示例代码：

  import audioPlayerModule from './SCSS/AudioPlayer.module.scss';
  /* 其余逻辑 */
  return (
    <div className={audioPlayerModule.audio_container}>
      <LeftControls playerStyles={audioPlayerModule}/>
      <CenterControls playerStyles={audioPlayerModule} />
      <RightControls playerStyles={audioPlayerModule}/>
    </div>
  )
  

  子组件直接接收props使用即可，不需要单独写import：

  const LeftControls = ({ playerStyles }) => {
    return (
      <div className={playerStyles.left_controls_container}></div>
    )
  }
  

  这个方案没有额外性能开销，后续如果样式文件调整存放路径，只需要修改父组件一处的引入路径即可，维护成本更低。

• 方案2：按组件拆分样式文件，公共能力抽离为SCSS片段
  如果子组件后续可能脱离父组件单独复用，更推荐拆分样式文件，不要把整个组件簇的所有样式都塞到同一份SCSS模块里：

  1. 每个组件对应自己专属的.module.scss文件，只存放当前组件本身的样式
  2. 所有组件共用的SCSS变量、mixin、函数，抽离为以下划线开头的SCSS片段文件（比如_audioPlayerCommon.scss），每个组件的样式文件通过@use引入这个公共片段即可，构建时不会重复打包公共内容
  3. 跨多个业务组件复用的通用样式类，单独抽到全局公共CSS模块中，所有组件从统一的公共路径引入，避免写多层相对路径

注意：不要为了减少import代码就放弃CSS Modules的隔离特性把样式改成全局类，很容易引发类名冲突、样式意外覆盖的问题，长期维护成本极高。

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