美文网首页
React使用less module修改antd样式

React使用less module修改antd样式

作者: 板栗炖牛肉 | 来源:发表于2020-10-22 15:16 被阅读0次

前言

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

相关文章

网友评论

      本文标题:React使用less module修改antd样式

      本文链接:https://www.haomeiwen.com/subject/tdaumktx.html