思考题的回答：一个使用了 CSS Modules 的 npm 包，该如何修改它内部的样式？

来源：7-16 面试重点：什么是 CSS Modules，如何使用？（下）

Jack N

2023-04-06

一个使用了 CSS Modules 的 npm 包，该如何修改它内部的样式？每次打包后，渲染的哈希值都不同，怎么能修改它内部样式呢？

答：利用 :global 可以覆盖组件库的样式，它生效范围内的样式会被当作全局CSS。:global 作用域下不会加上哈希值。

参考：
https://github.com/css-modules/css-modules
CSS in JS 和 CSS Modules 的对比
1、https://cloud.tencent.com/developer/article/1956280?from=article.detail.1895103&areaSource=106000.1&traceId=isB8NYGSx7maK7FihOibO
2、https://juejin.cn/post/7097210680532533285
3、https://cloud.tencent.com/developer/article/1895103

写回答

2回答

黑石

2023-04-06

已采纳

这个问题，同学你还得自己思考下，题目的意思是组件库里使用了 css modules，也就是说组件库的 css 的 class 是带 hash 的，我们使用这个组件，想去覆盖他的样式该怎么办的问题。

只使用 :global 是解决不了的。可以再想想。

黑石

Jack N

同学的这种解决方法是可以的，但是会比较麻烦，需要在组件里加 data- 的属性，如果编译器可以做，是比较好的。说回来，其实这个问题确实没有完美的解决办法，下面是我的一些见解：可以看看下面的文档：customizing-components： https://github.com/react-toolbox/react-toolbox#customizing-components 这里面提出了两个观点，一个是妄图去覆盖别人组件的样式，这本身就是一种 Hack 的行为，我们应该使用更优雅的方式实现，应该让 NPM 组件提供对应的 API 让外部调用修改，第二就是社区有提供了一个工具包，react-css-themr，每个 NPM组件接受外部传 theme 参数（css module 对象），用来定义所有样式。示例如下： import React from 'react'; import { AppBar } from 'react-toolbox/lib/app_bar'; import theme from './PurpleAppBar.css'; const PurpleAppBar = (props) => ( ); export default PurpleAppBar;

2023-04-11

共2条回复