如何在App.module.css中覆盖子组件的.content样式？

CSS Modules 默认会对类名做哈希编译实现局部作用域，直接在父组件样式里写.content无法匹配到子组件编译后的类名，可通过以下两种常用方案实现：

方案1：使用:global()选择器穿透（无需修改子组件代码） #

在父组件样式中，用:global()包裹子组件的原始类名，被包裹的类名不会被编译哈希，配合父级局部类名做后代选择，即可精准匹配到子组件元素：

/* App.module.css */
.app :global(.content) {
  /* 写需要覆盖的样式即可，例如 */
  background: #f5f5f5;
  padding: 16px;
  color: #333;
}

注意：如果担心全局.content类产生冲突，可以把子组件外层容器类也加入选择器提升精准度：.app :global(.container .content)

方案2：通过props传入自定义类名（推荐，耦合度低） #

如果是可维护的业务代码，更推荐给子组件增加类名透传的props，不直接依赖子组件内部类名，后续子组件内部结构调整也不会导致样式失效：

1. 修改子组件，接收自定义类名参数，和原有类名合并：

   // Component.tsx
   import style from './Component.module.css'
   
   interface ComponentProps {
     contentClass?: string
   }
   
   function Component({ contentClass }: ComponentProps) {
     return (
       <div className={style.container}>
         <div className={`${style.content} ${contentClass ?? ''}`}></div>
       </div>
     )
   }
   
   export default Component
   

2. 在父组件中传入自定义的局部样式类：

   // App.tsx
   import Component from './Component'
   import style from './App.module.css'
   function App() {
     return (
       <div className={style.app}>
         <Component contentClass={style.customContent} />
       </div>
     )
   }
   

3. 在父组件样式中写覆盖规则即可：

   /* App.module.css */
   .customContent {
     /* 覆盖样式 */
     font-size: 18px;
     line-height: 1.5;
   }
   

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