Как изменить стили для message в Ant Design в React?

Question

[x4zx]

Использую компонент Message из Ant Design в своём React приложении:
https://ant.design/components/message#message-demo...

Но потребовалось изменить стили самого сообщения, а точнее фон.
Для этого я попытался использовать Tailwdind CSS -> bg-slate-500, но
стиль применился не элементу самого сообщения с классом ant-message-notice-content,
а к элементу на уровень выше. Сейчас не знаю как применить стиль к нужному элементу и возможно вообще это сделать.
Возможно кто-то знает библиотеки компонентов получше Ant Design или конкретно библиотеку для вывода сообщений.

Answer 1

[Aetae]

Судя по доке на внутренний контент props'a класса нет.
Остаётся три варианта:
1. Изменение темы:
В v4 глобально, изменив less переменную: @message-notice-content-bg, в v5 через свойство contentBg:

https://ant.design/docs/react/migrate-less-variabl...

2. Тупо руками переписать вложенный класс:
.custom-class .ant-message-notice-content { ... }

3. Передать кастомный компонент с нужными стилями в качестве content.

Comments

[x4zx]

Большое спасибо