输出---修改ant样式

菥菥爱嘻嘻2025-10-21 18:01

一、修改ant design里面的样式

最近有一个公司的任务就是要去基于antdesign修改样式，之前都是ai修改的，这一次学到了很多：

大概的思路就是要先去文档里面查找将修改样式的类放在什么地方→控制台样式里面找对应的样式→对样式进行编写

以日期选择器为例子：

其实我根本没有找到修改样式的类应该放在哪里，我也是在网上搜寻才知道的 dropdownClassName

使用css in js语法把对应的类添加在里面就可以了。

jsx 复制代码

 <RangePicker
               dropdownClassName={styles.TimePickerPanel}
               className={styles.TimePicker}
               value={selectedDates} // 使用value作为受控组件
               onChange={(dates) => {
                 if (dates) {
                   setSelectedDates(dates as [dayjs.Dayjs, dayjs.Dayjs]);
                 }
               }}
               showTime={{
                 format: 'HH:mm:ss',
                 defaultValue: [dayjs().hour(0).minute(0).second(0), dayjs().hour(23).minute(59).second(59)]
               }}
               style={{
                 backgroundColor: 'rgba(36, 68, 110, 0.82)',
                 color: '#C0C2C4',
               }}
             />

然后就是找样式了：

就是要这样一个个去寻找对应的样式，而且还要注意是否嵌套，注意层级和优先级

一些样式代码：

tsx 复制代码

  .graphic-ant-picker-cell-selected .graphic-ant-picker-cell-inner,
        .graphic-ant-picker-cell-range-end .graphic-ant-picker-cell-inner,
        .graphic-ant-picker-cell-range-hover-end
          .graphic-ant-picker-cell-inner {
          background-color: #7ec2ff !important;
          color: #000 !important;
        }

tsx 复制代码

   /* 同时针对伪元素设置样式 */
        .graphic-ant-picker-range-arrow::before,
        .graphic-ant-picker-range-arrow::after {
          display: none !important;
          content: none !important;
          width: 0 !important;
          height: 0 !important;
        }

也可以找到修改的地方复制元素和样式交给ai修改

Dropdown:

tsx 复制代码

<Dropdown
               menu={{
                 items: menuItems,
               }}
               overlayClassName={styles.DropdownMenu}
               >
               <button className={styles.DropdownButton}>
                 {menuItems[0].label}
               </button>
             </Dropdown>