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

最新推荐文章于 2024-09-10 08:44:25 发布

Mqyyy

最新推荐文章于 2024-09-10 08:44:25 发布

阅读量1.6k

点赞数

文章标签：前端 html reactjs

本文链接：https://blog.csdn.net/Mqyyy/article/details/126412727

版权

本文介绍了在Next.js项目中如何通过行内样式和模块化CSS文件修改antd组件的默认样式，重点讲解了如何针对不同类型的组件（如常规和日期选择器）应用全局样式，并提到了使用`:global`和特定API如`dropdownClassName`的方法。

摘要由CSDN通过智能技术生成

在项目中使用了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是修改全局样式的。如果只需要修改某个组件的样式而不想影响全局就在最外层套一个自定义类名。