2022-09-15【记录react中使用antd定制样式的问题】

antd提供了ConfigProvider，通过prefixCls属性可以定制样式前缀

 <ConfigProvider prefixCls="main">
        < MainLayout />
 </ConfigProvider>

可以看到antd的相关样式前都加了main前缀 我们将css主题文件批量添加main-前缀，然后在项目中引入

结果如下

但是prefixCls对全局的组件message、notification等并不生效，我们在点击登录时弹出message和notification

运行结果如下

我们看到两个组件并没有从相应的位置弹出，因为它们的前缀并没有添加成功。 因为context与当前context不同导致的， 可查看 官网。 为了解决这个问题， 可以在调用notification方法前配置下ConfigProvider的prefixCls属性

再来运行下

可以看到样式已经正常添加。