Ant Design 的 Message 消息提示怎么自定义样式？

UX-杰森提问于 2026-03-11 11:26:19 阅读 5

组件

我在用 Ant Design 的 message 组件，想改一下它的背景色和字体大小，但直接写 CSS 好像没生效。试过加 !important 也不行，是不是被它的内联样式覆盖了？

我写了这段 CSS，但完全没反应：

.ant-message-notice-content {
  background-color: #e6f7ff;
  font-size: 16px;
}

Form表单 UI组件

我来解答赞 3 收藏

反馈

1 条解答

上官丹丹 Lv1

你的 CSS 没生效是因为 Ant Design 4.x 使用了 CSS-in-JS，样式通过 React 上下文注入的，不是普通的 CSS 文件，普通的类名选择器确实覆盖不了。

两个解决方法：

方法一：用 ConfigProvider 包裹（推荐）

用 ConfigProvider 的 style 属性可以直接透传到 Message 组件：

import { ConfigProvider, message } from 'antd';



ReactDOM.render(

  <ConfigProvider

    theme={{

      token: {

        colorBgSpotlight: '#e6f7ff',

        fontSize: 16,

      },

    }}

  >

    <App />

  </ConfigProvider>,

  document.getElementById('root'),

);

不过这样改的是全局 token，可能会影响其他组件。

方法二：直接覆盖全局样式（更直接）

在你的全局 CSS 里用更具体的选择器硬覆盖：

.ant-message-notice-content {

  background-color: #e6f7ff !important;

  font-size: 16px !important;

}

注意这种方式需要确保你的 CSS 在 Ant Design 样式之后加载。如果你是用 create-react-app 或 Vite 搭建的项目，可以在 index.css 里写，Ant Design 默认会把样式注入到 head 里，你可以检查一下 network 面板里 CSS 的加载顺序。

还有一点，Message 组件是动态创建的 DOM，CSS 文件只要加载了就有效，不存在作用域问题。你确认这个 CSS 文件被加载了吗？

2026-03-11 12:00