Переопределить стиль компонента AntD с помощью LESS - PullRequest
Новая
       42

Переопределить стиль компонента AntD с помощью LESS

0 голосов
/ 10 мая 2019

Я подозреваю, что это скорее МЕНЬШИЙ вопрос, и он может не относиться к Ant Design иначе, чем к тому, как они реализовали некоторые из своих компонентов, которые мешают мне переопределять или расширять стили.

В частности, я хочуизменить размер и вес шрифта для области заголовка компонента PageHeader.К сожалению, стиль компонента не использует переменные LESS, определенные в теме default.less для этих двух настроек.Исходный код можно найти здесь: https://github.com/ant-design/ant-design/blob/master/components/page-header/style/index.less

У меня нет проблем с изменением цвета, например, или любых других переменных, определенных в теме, но я новичок в LESS и не знаю, как сделать переопределениестили, определенные для отдельного компонента, как это.О, и я не хочу использовать встроенные стили.Мы используем этот компонент во многих местах в нашем приложении, поэтому я хочу определить переопределения в одном месте, один раз и сделать их глобальными для приложения (как я могу сделать с переменными темы).

Итак,как переопределить стили font-weight и font-size, определенные в строках 45 и 46 ссылочного файла?

1 Ответ

0 голосов
/ 13 мая 2019

Вот пример того, как я сделал это в своем проекте:

Использование файла .css

Переопределить класс CSS на .css/.scss и так далее: 

// Main layout where all antd componets used.
import './MyLayout.css';

/* MyLayout.css */
.ant-tooltip-inner {
  background-color: white;
  color: black;
}

Здесь я перевернул все всплывающие подсказки (по умолчанию черные).

White Tooltips

Использование стилевых компонентов

То же, что ивыше, как CSS-JS: 

const LayoutStyled = styled(Layout)`
  height: 100vh;
  * {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

  .ant-layout-sider-light .ant-layout-sider-trigger {
    border-right: 1px solid ${HCOLOR.border};
  }
`;

Здесь я переопределил все шрифты и добавил правую границу к триггеру antd sider (по умолчанию нет границы).

Trigger with border

Заключение

Найдите css-class / css-свойство с помощью dev-tools (Ctrl+Shift+C в Chrome) и переопределите его, как вам нравится.

...