方法

比如说我想删掉antd Input.Search 的左边框
在这里插入图片描述

  1. 从页面上找到要修改的位置,页面上修改后确定是这个样式名
    在这里插入图片描述
  2. 利用:global

css中写法

:global(.ant-input-search-icon:before){
      border-left: initial;
}

scss或者less中写法 scss自带嵌套比较方便

     :global{
        .ant-input-search-icon:before{
          border-left: initial;
        }
      }

注意,全局都被修改了?

  • :在复写某一部分antd样式的时候,一定要在外面加个元素套一下,不然所有的这个同名的样式都会被改变
<div className={'wrapper'}> //一定要记得包一层避免全局的这个样式被修改,请使用普通的类声明方式
   <Search />
</div>

:global(.wrapper .ant-input-search-icon:before){
      border-left: initial;
}

  • 如果你使用css modules的话,包裹的时候请使用普通的方式声明类名,css modules的样式最后都会被加上唯一的哈希值来确保不会污染样式。所以css识别不到

错误的包裹

import styles from './styles.css'

<div className={styles.wrapper}>   //错误!!!!
   <Search/>
</div>

<div className={'wrapper'}> //正确!!!!
   <Search />
</div>

:global(.wrapper .ant-input-search-icon:before){
      border-left: initial;
}
  • 推荐使用scss或者less,自带的嵌套规则十分方便且不用担心css module带来的影响
<div className={styles.wrapper}>
   <Search/>
</div>

.wrapper{
	:global{
 	 	.ant-input-search-icon:before{
          	border-left: initial;
  	     }
   	}
}
Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐