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

Question

一个使用了 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

Answer 1

黑石 2023-04-06 18:44:32

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

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

• 提问者 Jack N #1

  老师好！
  我上个回答确实离题了哈哈。我重新审题后回答，请老师点评。回答如下：
  解题思路：
  寻找基于 CSS Modules 开发的组件库 - 查看其 API 文档（因为它的用户一定会面临老师提出的问题）- 找解决方法
  答：
  CSS Modules 默认情况下 hash 值只会影响类名和动画名称。
  根据这个特性，我们找不被影响到的属性，然后通过属性选择器来覆盖样式，比如通过data-这个属性。
  
  举个例子
  这个 npm 组件库，应该在组件关键节点上添加 data- 的属性（或者组件库给出 API 让用户自定义 data-的值）,然后用户通过属性选择器来覆盖样式。
  
  参考链接
  https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Howto/Use_data_attributes
  https://juejin.cn/post/6844903425998602248#heading-9
  http://react-toolbox.io/#/install

• 黑石 回复 提问者 Jack N #2

  同学的这种解决方法是可以的，但是会比较麻烦，需要在组件里加 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) => (
    <AppBar {...props} theme={theme} />
  );
  ​
  export default PurpleAppBar;