Подготавливаем Ant Design

Northstarадминка

Олегтимлид команды админки

Наша очередь: админка на Ant Design. Кнопки и акценты там должны быть того же цвета, что на витрине. Два набора брендовых цветов мы поддерживать не будем.

Маринадизайнер

То есть у каждой библиотеки свой адаптер, а значение одно?

Василийведущий разработчик

Да. Ant Design получит тот же actionColor, что и Mantine. Поменяем action.bg в JSON, и перекрасятся обе.

Тема Mantine не управляет компонентами Ant Design: у каждого UI-кита свой формат настройки.

Что делаем: устанавливаем Ant Design и добавляем antd в package.json. В src/App.jsx импортируем:

ConfigProvider и кнопку Ant Design из antd;
вместе с mantineTheme из ./theme.js.

Компонент пока не выводим на экран.

Почему: у каждой библиотеки свой провайдер темы.

Библиотека	Провайдер	Где цвет
Mantine	`MantineProvider`	палитра `brand`
Ant Design	`ConfigProvider`	`theme.token.colorPrimary`

Формат разный, но передавать можно уже вычисленный , не копируя hex-код.

Подготавливаем Ant Design

Редактор · src/App.jsx

Предпросмотр