在umi+react项目下修改antd框架里的组件默认样式

目录

前言

如果你发现使用 /deep/ 样式穿透或者 >>> 无法修改，可以使用 :global 来修改，具体使用请查看演示说明

演示说明

比如我现在要修改表格里表头的样式
先找到UI框架写好的表头样式的位置，我这里是 .ant-table-thead > tr > th 然后在它前面加上 :global ，我这里是改变了表头的背景色和字体颜色，这样就实现了修改，是不是很简单，哈哈哈

:global .ant-table-thead > tr > th{
    background: #F3F9FF;
    color: #666666;
  }
或者写在:global{}里
:global {
  .ant-table-thead > tr > th{
    background: #F3F9FF;
    color: #666666;
  }
}

补充：有的时候可能我们只是想在某个页面组件里改变组件样式，所以为了防止全局污染，可以把这部分global代码写在类名里面，比如：

.roleModalTable {
  :global {
    .ant-modal-body {
      padding-bottom: 0;
    }
  }
}

原理

打开浏览器检查，找到这段样式，你会发现，因为global的缘故，你写的样式优先级高于框架写好的样式，因此ui框架这个位置的样式被覆盖了，达到了修改的效果。

如果解决了你的问题，可以点赞收藏关注一下哦，来一起学技术。
如需转载请表明出处