前言

今天根据原型图做一个密码修改框的时候，需要修改 antd 表单 label 的默认样式，把 label 放到 input 框的上面，上个图大家就懂了：

一开始感觉没啥问题，用 chrome 调试工具在页面上找到 antd 组件内相应的元素，修改对应的 class 达到效果后复制到了 VSCode 里：

但是，页面完全没有变化！！！！！！！

后来翻了其他项目的代码才发现这里有一个坑

坑

在 React 项目中使用 scss/less，如果想让样式仅作用在某个组件，而不影响全局，一般都会把样式文件进行模块化，即打包后每个 class 名都会被自动加上一串唯一的序列号。举个例子：

    .main {
         width: 100px;
    }

模块化后打包的结果会是：

    .main__3D0Xe{ width: 100px; }

而我们公司的框架自动做了样式的模块化，因此正是这串序列号导致无法正确选中 antd 组件内部元素的 class

解决方法

如果不想要这串序列号，那么在最外层套上一层 :global 即可～