Специфика CSS с помощью модуля CSS

Question

Во-первых, позвольте мне сказать, что я понимаю, что у меня есть специальный компонент "Карта", который я использую в одном из своих маршрутов "Домой".

Card.js

import s from 'Card.css';
class Card {
    ...
    render(){
        return (<div className={cx(className, s.card)}>
            {this.props.children}
        </div>);
    }
}

Card.css

.card {
    display: block;
}

Home.js

<Card className={s.testCard}>
...
</Card>

Home.css

.testCard { display: none; }

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

Чтобы правильно загрузить.testCard после.card, я использовал "composes:":

Home.css

.testCard {
    composes: card from 'components/Card.css';
    display: none;
}

Очевидно, это заставляет css-loader распознавать, что.testCard должен загружаться после.card. Кроме того, если я отключаю Javascript, страница возвращается к старому поведению:.card загружается после.testCard, и она снова становится видимой.

Каков рекомендуемый способ получения нашей страницей приоритетов.testCard над картой, которая работает согласованно с включенным Javascript или без него?

Answer 1

Поскольку я использую модули CSS, решение charlietfl не будет работать как есть. .card автоматически искажается имя .Card-card-l2hne загрузчиком css, так что ссылаться на него из другого компонента не получится. Если я импортирую его в файл CSS Home.css, это также не работает, потому что он создает новый класс с именем как .Home-card-lnfqвместо того, чтобы ссылаться на .Card-card-l2hna,

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

Например, Home.js:

import s from 'Home.css';
import Card from './components/Card';

class Home {
    ...
    render(){
        return (
        <div className={s.root}>
            <Card className={s.testCard}>Hi</Card>
        </div>
        );
    }
}

Home.css

.root {
    margin: 10px;
}
.root > .testCard {
    display: none;
}

Таким образом, нам не нужно знать, какой компонент имен классов Card используется внутренне, особенно потому, что в таких случаях, как CSS-модули или стилизованные компоненты, имя класса является неким уникальным сгенерированным именем.

Я не думаю, что пришел бы к этому решению, если бы не решение Чарлифтла, поэтому большое спасибо за это.

Answer 2

Просто сделайте правило testCard более конкретным, комбинируя классы

.card {display: block;}

.card.testCard { display: none; }

Answer 3

Специфичность Css рассчитывается на основе используемых селекторов. Селекторы элементов имеют значение 1. Селекторы классов имеют значение 10. Селекторы идентификаторов имеют значение 100. Inline css имеет значение 1000.

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

Например. в случае создания селектора

.card против .card.testCard

.root > .testCard

(используя примеры, размещенные здесь)

Рассчитанные значения специфичности:

• .карта = 10
• .card.testCard = 100
• .root > .testCard = 100

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

Предостережение: если селекторы, указывающие на один и тот же элемент, имеют одинаковое значение, то побеждают последние правила. так что в примере здесь

      <style>
.card.testCard { color: red; }
.root > .testCard { color: green; }
</style>

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