如何优雅的修改antd中的默认样式

前言

项目需要初学React，在使用antd mobile 的过程中，发现Form表单默认的样式有上下横线，因为项目使用的Css module，写的类名会进行hash,所以使用常规的写法没办法选择.adm-list-default .adm-list-body

const Account: React.FC = () => {
  return (
    <div>
      <Form className={s.form}>
        <Form.Item label="输入框">
          <Input></Input>
        </Form.Item>
      </Form>
    </div>
  );
};

直接引入全局Css的方式进行覆盖（否定）

这样虽然可以直接选中.adm-list-default .adm-list-body，但是也有可能造成全局变量名的污染。并且同样的组件导入两个css文件不太符合单一性原则

使用:global包裹选择（推荐）

css module针对全局的样式（使用:global包裹的），不会将类名进行hash化，换句话来说，我们可以利用这一点，将antd组件外部用来精细化控制样式的类定义在:global中，这样就避免了类名hash化，可以配合antd的类名规则，实现样式控制。

less:

.form {
    :global {
      .adm-list-default .adm-list-body {
        border: 0;
      }
    }
}

对比参照Vue

:global跟Vue中的:deep有异曲同工之处，都是在hash类的子类中不进行类名的hash从而选择指定的样式类