在React中，如何对Ant Design组件的多个class进行样式修改？

在React项目中使用Ant Design组件时，很多时候我们需要对组件的多个内置class进行样式调整，比如同时修改按钮的默认样式、hover状态和禁用状态的样式，或者同时调整表格的表头、单元格和分页区域的样式。下面介绍几种常用的实现方案。

方案一：通过className拼接自定义类名

Ant Design组件支持通过className属性传入自定义类名，我们可以将自定义类名和组件默认类名拼接，然后编写对应的CSS样式覆盖默认样式。这种方式适合只需要修改少量class的场景。

首先定义一个CSS文件，编写需要覆盖的多个class的样式：

/* custom-ant.less */
.my-custom-btn {
  // 修改按钮默认样式
  &.ant-btn {
    background: #722ed1;
    border-color: #722ed1;
    color: #fff;
  }
  // 修改按钮hover状态样式
  &.ant-btn:hover {
    background: #9254de;
    border-color: #9254de;
  }
  // 修改按钮禁用状态样式
  &.ant-btn:disabled {
    background: #d3adf7;
    border-color: #d3adf7;
    color: rgba(255, 255, 255, 0.7);
  }
}

然后在React组件中引入样式并拼接类名：

import React from 'react';
import { Button } from 'antd';
import './custom-ant.less';

const MyComponent = () => {
  return (
    <Button className="my-custom-btn ant-btn">自定义按钮</Button>
  );
};

export default MyComponent;

方案二：使用CSS Modules避免样式污染

如果项目使用了CSS Modules，可以通过模块化的类名来修改多个class，避免全局样式污染。这种方式适合组件化程度高、需要隔离样式的场景。

首先创建模块化的样式文件：

/* CustomTable.module.css */
.tableWrap {
  // 修改表格容器样式
  :global {
    // 修改表头样式
    .ant-table-thead > tr > th {
      background: #f0f5ff;
      color: #1d39c4;
      font-weight: 600;
    }
    // 修改单元格样式
    .ant-table-tbody > tr > td {
      padding: 12px 16px;
    }
    // 修改分页器样式
    .ant-pagination {
      margin-top: 20px;
      text-align: right;
    }
  }
}

然后在组件中引入并使用：

import React from 'react';
import { Table } from 'antd';
import style from './CustomTable.module.css';

const columns = [
  { title: '姓名', dataIndex: 'name', key: 'name' },
  { title: '年龄', dataIndex: 'age', key: 'age' },
  { title: '地址', dataIndex: 'address', key: 'address' },
];

const data = [
  { key: '1', name: '张三', age: 20, address: '北京' },
  { key: '2', name: '李四', age: 25, address: '上海' },
];

const MyTable = () => {
  return (
    <div className={style.tableWrap}>
      <Table columns={columns} dataSource={data} />
    </div>
  );
};

export default MyTable;

方案三：使用less/sass嵌套覆盖深层class

如果项目配置了less或者sass预处理器，可以通过嵌套语法直接定位Ant Design组件的多个深层class，这种方式适合需要批量修改同类型组件多个样式的场景。

编写less样式文件：

/* custom-input.less */
.custom-input-wrap {
  // 修改输入框默认样式
  .ant-input {
    border-radius: 4px;
    border-color: #d9d9d9;
    &:focus {
      border-color: #40a9ff;
      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
    }
  }
  // 修改输入框前缀图标样式
  .ant-input-prefix {
    color: #bfbfbf;
  }
  // 修改输入框禁用样式
  .ant-input:disabled {
    background: #f5f5f5;
    color: rgba(0, 0, 0, 0.25);
  }
}

在组件中引入使用：

import React from 'react';
import { Input } from 'antd';
import './custom-input.less';

const MyInput = () => {
  return (
    <div className="custom-input-wrap">
      <Input placeholder="请输入内容" prefix={<span>🔍</span>} />
    </div>
  );
};

export default MyInput;

注意事项

• 修改Ant Design组件样式时，建议先通过浏览器开发者工具查看组件对应的具体class名称，避免写错类名导致样式不生效。
• 如果使用CSS Modules，修改Ant Design的全局class需要用到:global语法，否则编译后类名会被哈希化，无法匹配到组件默认类名。
• 尽量不要直接修改Ant Design组件的默认class样式，而是通过自定义类名包裹的方式修改，避免影响其他使用相同组件的页面。
• 如果修改后样式不生效，可以检查样式优先级，必要时可以加上!important提升优先级，但不要过度使用。

ReactAnt_Designclass样式修改CSS_modules修改时间：2026-07-23 16:18:22