Next.js中使用antd修改其组件的默认样式

在项目中使用了next.js搭配了antd，其中需要自定义antd样式，在next.js中如果想定义css，我用到的有两种方式：

一种是直接使用行内式

<div style={{ marginTop: 10 }}>test<div>

 另一种就是写一个css文件后引入，定义一个test.module.css文件

//test.module.css文件
.testDiv{
  margin-left: 30px;
}

 在页面中引入

import style from "./test.module.css";

使用时，此时在css文件内定义的样式就可以在类名对应的div上生效了

//页面中使用
<div className={style.testDiv}>
    test
<div>

那么现在开始修改antd默认样式！

如果是修改一些常规的组件：（自定义类名+:global+antd内部定义类名）

定义好类名，这个platform就是最外层自定义的类名，然后使用:global，后面接antd内部定义好的类名，然后将css文件引入，在对应的组件上绑定，就完成了antd默认样式的修改啦

/* 单选按钮样式 */
.platform :global .ant-radio-button-wrapper{
  border: none;
}
.platform :global .ant-radio-button-wrapper:not(:first-child)::before{
  width: 0px;
}
.platform :global .ant-radio-button-wrapper{
  border: 1px solid #eee;
  margin-right:10px;
  border-radius: 2px;
}

 如果是一些rangPicker组件：需要修改弹出的日历时（其实还是同理）

在 antd 的 rangPicker 中有一个API叫做dropdownClassName，专门是用来定义额外弹出日历的className，这个和DatePicker是通用的，此时需要把自定义的类名放在这里（注意写法）：

<RangePicker
    dropdownClassName={style['rangePicker']}//rangePicker为自定义的类名
    defaultValue={[moment(), moment()]}
    disabledDate={hourDisabledDate}
    format={dateFormat}
    onChange={pickTime}
/>

随后依然用 自定义类名+：global+antd内部定义类名来修改antd默认样式

/* 日期弹出框样式 */
.rangePicker :global .ant-picker-panel-container{
  display: flex;
  flex-direction: row-reverse;
}
.rangePicker :global .ant-picker-footer{
  min-width:95px;
  padding-top: 20px;
  border-right: 1px solid #f0f0f0;
}

此时我们自己写的样式已经生效啦！

注意：  最外层加一个自定义的类名的原因是：global是修改全局样式的。如果只需要修改某个组件的样式而不想影响全局就在最外层套一个自定义类名。