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

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

组件

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

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

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

Form表单 UI组件

我来解答赞 9 收藏

反馈

2 条解答

UX-爱华 Lv1

Ant Design 的 message 组件的样式有时候会被内联样式覆盖，直接写 CSS 确实可能不太管用。你可以尝试通过 style 属性来覆盖默认样式。不过，如果你坚持要用 CSS 来实现，可以尝试增加选择器的权重或者使用 Ant Design 提供的 ConfigProvider 来全局设置主题。

这里有一个直接的方法，通过 style 属性来设置：

import { message } from 'antd';



message.success('这是一条消息', 3, () => {}, {

  style: {

    backgroundColor: '#e6f7ff',

    fontSize: '16px',

  },

});

这样可以直接在调用 message 的时候设置样式，避免被内联样式覆盖。

如果你希望全局修改 message 的样式，可以考虑使用 ConfigProvider 的 theme 属性，但这会比较复杂一些，涉及到主题定制。对于单个样式的修改，直接在调用时添加 style 属性应该是最简单直接的解决方案。

2026-03-24 07:02

上官丹丹 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