Reactjs Модуль CSS множественный селектор классов - PullRequest
Новая
       4

Reactjs Модуль CSS множественный селектор классов

1 голос
/ 06 мая 2020

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

Layout.module. css

.Content {
    padding-left: 240px;
    min-height: calc(100vh);
    top: 0;
    display: block;
    position: relative;
    padding-top: 80px;
    background: #eee;
    padding-bottom: 60px;
    transition: padding-left 0.2s linear;
}

.Content.collapse {
    padding-left: 100px;
    display: block;
    transition: padding-left 0.2s linear ;
}

Теперь я добавил класс коллапса в свой компонент навигации, вот так 

const layout = (props) => (
    <Aux>        
        <Sidebar collapse={props.collapse} />        
        <div className={`${classes.Content} ${props.collapse ? 'collapse' : ''}`}>
            <TopNavigation toggle={props.toggle}/>
            {props.children}
            <Footer />
        </div>
    </Aux>  
);

Так что, по сути, я просто проверяю опоры, обрушился он или нет. Если это так, я добавлю в класс текст collapse. Теперь, когда я нажимаю кнопку, устанавливается состояние state.collapse = true / false. Он справился со своей работой. Теперь кажется, что это не мой стиль css. Ниже приведен сгенерированный класс в моем DOM

введите описание изображения здесь

Обратите внимание, что был обнаружен стиль класса .Content. Но, как вы можете видеть здесь

Layout_Content__2WLOk collapse, контейнер div имеет класс коллапса. Итак, я подумал, что он должен прочитать селектор .Content.collapse. Я что-то упустил?

Ответы [ 3 ]

2 голосов
/ 06 мая 2020

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

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

Итак 

<div className={`${classes.Content} ${props.collapse ? classes.collapse : ''}`}>
1 голос
/ 06 мая 2020

Вы используете строку, а не сгенерированный ha sh

эта часть не будет работать 

${props.collapse ? 'collapse' : ''}

Быстрое исправление

Попробуйте не связывать ее. 

.collapse {
    padding-left: 100px;
    display: block;
    transition: padding-left 0.2s linear ;
}

и добавьте

classes.collapse вместо collapse

${props.collapse ? classes.collapse : ''}
0 голосов
/ 06 мая 2020

В React вам нужно использовать ключевое слово className вместо class

https://reactjs.org/docs/dom-elements.html#classname

Также, если вы хотите использовать CSS Modules вам нужно импортировать ваш Layout.module. css файл, как этот 

import styles from './Layout.module.css';

И вы можете добавить селектор CSS вот так 

<div className={styles.Content}></div>

вы можете изучить это здесь https://www.w3schools.com/react/react_css.asp

...