react css 修改复写antd组件样式,而且不污染全局

方法

比如说我想删掉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;
  	     }
   	}
}