使用less modules怎么修改antd组件的默认样式，修改antd的样式

前言

使用less modules来打包代码，想要直接在.less中修改antd的样式，但是类名会被加上hash值，应用不到antd的样式上。除此之外，antd的类名不经less-modules改变（配置）

---

想要在.less中更改antd的样式，可用:global实现。

以下是修改antd List组件的样式示例）：

:global{
  .ant-list-header {
    padding-top: 0 ;
    padding-bottom: 0 ;
    border-bottom: none ;
  }
  .ant-spin-container{
    height: 405px;
    overflow: auto;
    .ant-list-item {
      padding: 10px 0;
    }
  }
}

但这样会导致antd中所有这些类名（.ant-list-header .ant-spin-container .ant-list-item）的样式都会改变，所以我们需要在这些类的上层再加一层类用于识别

.less代码如下（示例）：

.task_list{
 :global{
   .ant-list-header {
     padding-top: 0 ;
     padding-bottom: 0 ;
     border-bottom: none ;
   }
   .ant-spin-container{
     height: 405px;
     overflow: auto;
     .ant-list-item {
       padding: 10px 0;
     }
   }
 }
}

List组件添加task_list类（示例）：

<List
	className={styles.task_list}
  	header={<div>{logName}</div>}
  	dataSource={data}
  	renderItem={(item) => (
	    <List.Item>
	      {item}
	    </List.Item>
  )}
/>

有些时候，我们会碰到一种情况：我们想修改的antd样式的上层是body（比如Modal，Select选择器的下拉框dropdown）。一般这种情况下，antd都会提供一个API，以供使用者添加类名对其进行样式修改。

修改Select选择器的下拉框dropdown样式（示例）：

<Select
  mode="multiple"
  dropdownClassName={styles.multi_select}
  disabled={item.disabled}
  placeholder={item.placeholder}
  allowClear={item.allowClear}
>
  {item.options.map((option) => {
    return (
      <Option value={option.value} key={option.value} disabled={option.disabled}>
        {option.text}
      </Option>
    );
  })}
</Select>

dropdownClassName便是antd提供的修改下拉框样式的API。

less文件：

.multi_select {
  max-height: 136px;
  overflow-y: auto;
}