Специфика CSS с помощью модуля CSS - PullRequest
Новая
       9

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

0 голосов
/ 04 июля 2018

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

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 или без него?

Ответы [ 2 ]

0 голосов
/ 05 июля 2018

Поскольку я использую модули 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-модули или стилизованные компоненты, имя класса является неким уникальным сгенерированным именем.

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

0 голосов
/ 04 июля 2018

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

.card {display: block;}

.card.testCard { display: none; }
...