Приоритет стиля CSS при использовании модулей React и CSS - PullRequest
Новая
       20

Приоритет стиля CSS при использовании модулей React и CSS

0 голосов
/ 26 февраля 2020

У меня есть модуль css, который применяет стили к существующему компоненту. Модуль css работает нормально, но стиль всегда перезаписывается стилем компонента по умолчанию.

Предположим, у меня есть эта разметка. 

 <Header className={styles.header}>
      <Row type="flex" justify="space-between">
        <Col>
          <Link to="/">
            <Title className={styles.brand}>Shiritori</Title>
          </Link>
        </Col>
      </Row>
 </Header>

Затем используются стили, объявленные в css module: 

.header {
  background: rgb(75, 191, 107);
  margin-bottom: 1rem;

  > div {
    align-items: center;
  }
}

Я ожидаю, что свойство background css стиля по умолчанию будет перезаписано, но вместо этого стили в моем модуле css были отменены.

Фактический результат: 

.ant-layout-header {
    height: 64px;
    padding: 0 50px;
    line-height: 64px;
    background: #001529;
}
.ant-layout-header, .ant-layout-footer {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}
.ant-layout, .ant-layout * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.App_header__37gyT {
    background: #4bbf6b; <- this property was overwritten by the .ant-layout-header background property
    margin-bottom: 1rem;
}

Я также рассматриваю порядок импорта css / s css, но результат тот же. 

import "../../../node_modules/antd/dist/antd.css";
import styles from "./App.module.scss";

Есть ли способ перезаписать существующий стиль компонента. Я использую antd для инструментария и компонентов пользовательского интерфейса.

1 Ответ

1 голос
/ 27 февраля 2020

Невозможно повторить вашу проблему. Кажется, работает нормально:

Edit Ant-Design CSS Specifity

При этом, имея дело со спецификой CSS, вы можете сделать одну из нескольких вещей:

  1. Перезаписать стиль дочернего класса из стиля родительского класса.

  2. Использовать свойство id: <Header id="header-id">Header</Header> (затем использовать # для ссылки на заголовок: #header-id { ... })

  3. Перезаписать имя класса .ant-layout в отдельном файле CSS / S CSS.

  4. Добавьте объявление !important после свойства стиля, например: background: pink !important;

При этом я бы не стал импортировать всю библиотеку CSS и вместо этого используйте плагин babel , чтобы импортировать только то, что нужно.

...