React使用less module修改antd样式

前言

react项目使用less，开发中需要修改antd样式，但又不需要全局修改，记录一下解决方案。

解决方案

.styleName {
  :global {
    .ant-drawer-content {
      overflow: unset;
    }
  }
}

styleName 是外部包裹的className，ant-drawer-content 是antd的样式。

:global{}包裹可以解决module下css样式不被改变名称，styleName包裹，保证只在该div样式下生效。

PS

• 对于 .xxx .xxx .xxx{}的样式，不生效可以加!important试试

 .ant-drawer-content-wrapper {
      box-shadow: unset !important;
 }

• 切记，直接在less文件下 :global{}是全局生效！
• css module 应该是差不多的，只是写法改变了。
• less导入react看这里React添加less