Как условно применить стили в компоненте React с модулями CSS?
Я использую Модули CSS для локального охвата всех моих стилей по умолчанию. Насколько я понимаю, единственный способ использовать имена классов, установленные в локальной таблице стилей (./movieCard.styl), - это использовать атрибут styleName = "something". Итак, className = "something" не сможет получить доступ к стилям в ./movieCard.styl. Думаю, я мог бы использовать метод style = {} для элемента HTML, но я хочу, чтобы мои компоненты были чистыми, без разметки стилей - поэтому я надеюсь, что есть другой способ сделать это с помощью синтаксиса модуля CSS.
Я пробовал следующее (хотя методы не выдают ошибок, они не работают): styleName = {isHovered ? ' movie-card--show' : ''}className = {isHovered ? ' movie-card--show' : ''}
Контекст: я пытаюсь показать информацию о фильме в зависимости от того, наводит ли пользователь курсор на плакат фильма или нет. Мне нужно будет применить какой-то стиль к элементу move-card__info, чтобы текст был виден при наведении курсора на плакат.
Ниже приведен пример того, чего я пытаюсь достичь.
import React, { Component } from 'react';
import CSSModule from 'react-css-modules';
import styles from './movieCard.styl';
class MovieCard extends Component {
state = {
movie: this.props.movie,
isHovered: false,
};
cardHoverToggle = () => {
const { isHovered } = this.state;
this.setState({ isHovered: !isHovered });
};
render() {
const { movie, isHovered } = this.state;
return (
<div styleName = "movie-card" onMouseEnter = {this.cardHoverToggle} onMouseLeave = {this.cardHoverToggle}>
<img
styleName = "movie-card__poster"
src = {`https://image.tmdb.org/t/p/w200/${movie.poster_path}`}
alt = {`Movie poster for ${movie.original_title}`}
/>
<div styleName = "movie-card__info">
<p>{movie.original_title}</p>
</div>
</div>
);
}
}
export default CSSModule(MovieCard, styles);
Вопрос: Как я могу условно применить стили, написанные в локальной области действия компонента реакции (Модуль CSS), на основе государственный? Можно ли это сделать с styleName, если да, то как?
использование компонента более высокого порядка для внедрения реквизита может сработать. Можете ли вы создать песочницу / код, чтобы мы могли опробовать подходы?
Ответы 4
Если вы не хотите добавлять 'movie-card - show' к текущему имени класса, вы можете использовать его с именами классов.
import classnames from 'classnames';
Применение:
className = {classnames('Here-goes-your-classes-you-always-use', { 'movie-card--show': isHovered })}
если isHovered истинно, он добавит еще один класс в ваш «Всегда использовать классы»
Пример:
Допустим, у вас есть простой div
<div className = {classnames('container',{'new-style' : isHovered})}>
если isHovered = true className должно выглядеть как
className = "container new-style"
если isHovered = false
className = "container"
У меня нет опыта работы с styleName, но вот как я добиваюсь этого с className:
const completedClass = task.completed ? styles.isCompleted : '';
return (
<div className = {`${styles.task} ${completedClass}`}>
</div>
)
Таким образом, если completedClass истинен, styles.isCompleted будет добавлен к className вместе с styles.task, который не заботится о состоянии.
Я использовал строковые литералы, так как мне нужно несколько классов, если бы styles.isCompleted был единственным нужным мне классом, я мог бы использовать:
className = {completedClass}
или же
className = {task.completed ? styles.isCompleted : ''}
Другой тип написания
import cx from 'classnames';
import s from './style.scss';
Рендеринг части
<div className = {cx(s.container, {
[s.hovered]: this.state.isHovered,
})}/>
А еще можно написать вот так
import classnames from "classnames";
import classes from "./Navbar.module.scss";
и внутри div или элемента
className = {[classnames(classes.navbar, {
[classes.navbar__hidden]: !this.state.visible
})].join(" ")}
className = {isHovered ? styles.myCardShow : ''}, как вы упомянули в своем вопросе.