使用了css modules怎么修改antd组件的默认样式，修改antd的样式

使用了css-loader中的css modules来打包代码，想要直接在css中修改antd中的样式但是类名会被加上hash值，应用不到antd的样式上，另外antd的类名不经css-modules改变（配置）。

我要修改的是antd中的样式，用自己的样式覆盖默认的样式，比如modal中的背景颜色。使用:global来修改：

:global{
   
        .ant-modal-content{
            background-color: transparent;
        }
    
}

但是这样会将所有的模态框中的content都设为透明的，而我只想要单独设置这一个模态框的样式而已，所以我们可以在这个类的上层再加一层用于识别（跟我们css权重应用一样的道理）。

:global{
    .tableBottomPop{  
        .ant-modal-content{
            background-color: transparent;
        }
    }
}

加样式：

<Modal
    className="tableBottomPop"
    title="Modal"
    centered
    visible={visible}
    footer={null}
    header = {null}
    mask={false}
    okText="确认"
    cancelText="取消"
>
</Modal>

这里可以看到我们加了一个tableBottomPop的类，这个自己定义的类名需要在你想要覆盖那个类名的上层，例如：在这里我想要覆盖modal组件中ant-modal-content这个类名的样式，而这个类名在modal中嵌套了多层，所以可以直接在他的祖先节点上加上自定义的类名即可。

这个类名仅用于加权重识别的，所以不能在里面像css modules那样应用样式，而是直接写：className="tableBottomPop"而不是className={S.tableBottomPop}否则样式不能应用。

好了，现在就可以看到antd的组件样式已经被自己的样式覆盖了。