CSS 模块 - 将类排除在转换之外

Question

我正在使用 CSS 模块，到目前为止一切正常。

我们开始使用外部 UI 库和我们自己的库，所以我正在编写这样的组件:

<div className={styles['my-component']}>
   <ExternalUIComponent />
</div>

假设 ExternalUIComponent 有自己的类，在最终的 CSS 文件中看起来像这样 external-ui-component，我如何从我的代码中调整这个组件样式css 文件？以下示例不起作用:

.my-component {
   font-size: 1em;
}

.my-component .external-ui-component {
   padding: 16px;
   // Some other styling adjustments here
}

Answer 1

请不要像其他人建议的那样使用内联样式。尽可能远离内联样式，因为它们会导致不必要的重新渲染。

您应该改用global。

.my-component {
    :global {
        .external-ui-component {
           padding: 16px;
           // Some other styling adjustments here
        }
    }
}

https://github.com/css-modules/css-modules#usage-with-preprocessors

此外，我建议使用驼峰式命名，这是 css 模块的首选方式。所以你的类名是:.myComponent { ... }

你可以在你的代码中使用它作为

<div className={ styles.myComponent } >

如果您想添加更多样式，可以使用array.join(' ') 语法。

<div className={ [ styles.myComponent, styles.anotherStyle ].join(' ') } >

这更干净!