Antd Настройка цвета глобальной темы

Я новичок в antd и мне нужно установить глобальную тему на одну из цветовых палитр antd. Я создаю приложение, используя Django, React и antd.

Я установил пакет цветов:

npm install @ant-design/colors --save

Затем я добавил палитру в файл Layout.js, мой макет по умолчанию:

import { purple } from '@ant-design/colors';

Который отображается в консоли

console.log(purple);
console.log(purple.primary);

Я пытаюсь понять, как сделать так, чтобы это отменяло цвета по умолчанию и отображало фиолетовые цвета.

Я пытался включить в тему:

const theme = { primary: purple[5] };

Я также попытался добавить к маркеру:

const {
    token: { purple, colorBgContainer, borderRadiusLG },
} = theme.useToken();

Я выяснил это на сайте antd:

https://ant.design/docs/react/customize-theme#customize-design-token

Обернув макет в ConfigProvider:

<ConfigProvider
        theme={{
        token: {
            // Seed Token
            colorPrimary: purple.primary,
        },
        }}
    >
<Layout>
  ...
</Layout>
</ConfigProvider>

Здесь задается глобальная цветовая тема. Если есть лучший способ, пожалуйста, дайте мне знать.

Чтобы установить глобальную тему на одну из цветовых палитр antd, вы можете использовать компонент ConfigProvider, предоставляемый antd. Вот как вы можете этого добиться:

import { ConfigProvider } from 'antd';
import { purple } from '@ant-design/colors';

// Wrap your entire application with ConfigProvider
ReactDOM.render(
  <ConfigProvider theme={{ primary: purple[5] }}>
    <App />
  </ConfigProvider>,
  document.getElementById('root')
);

Оборачивая все приложение с помощью ConfigProvider, вы можете установить реквизит theme для определения основного цвета. В данном случае в качестве основного цвета установлен фиолетовый[5].

При таком подходе цвета, используемые компонентами antd по умолчанию, будут заменены выбранной палитрой. Теперь все компоненты antd в вашем приложении будут использовать фиолетовую палитру в качестве основного цвета.

Вернуться на верх