Несколько условий для стилизации с помощью модулей Css

Я пытаюсь установить несколько условий с помощью тернарного оператора для стилизации элемента с использованием модулей Css. Я не могу найти точный синтаксис. это вообще возможно? есть некоторые поля, которые имеют 3 размера: по умолчанию маленький размер, большой размер для того, который наведен, и средний размер, когда хотя бы один из них наведен.

import style from './styles.module.sass'
const Slider =()=>{
const [hover,isHovered]=useState(false);
const [anyCardHovered,setAnyCardHovered]=useState(false)
return 

<div className = {`{ hover? ${style.hoveredBox}: anyCardHovered? ${style.smallBox}: style.box}`>
  
</div>

css reactjs next.js jsx css-modules

07.01.2023 09:43

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я бы, вероятно, создал переменную с именем классы и установил ее значение и логику над вашим оператором возврата JSX. Затем вы можете просто установить classname = {classes} в своих полях.

let classes = 'small'; 

if (hover) {
    classes = 'big'
} else if (anyCardHovered) {
    classes = 'medium'
} else {
    classes = 'small'
}

07.01.2023 12:01

Ответ принят как подходящий

<div className = {hover 
  ? style.hoveredBox
  : anyCardHovered
     ? style.smallBox
     : style.box
}></div>

Другой путь:

/* Bits: hover, anyCardHovered */
const classNames = [
  style.box,        // 00
  style.smallBox,   // 01
  style.hoveredBox, // 10
  style.hoveredBox  // 11
];

<div className = {classNames[hover << 1 | anyCardHovered]}>
</div>

Подробнее в: https://blog.uidrafter.com/bitwise-table-lookup

07.01.2023 12:11

Другие вопросы по теме

Данные из Firebase загружаются в пользовательский интерфейс, но впоследствии исчезают

Props.items(Object), возможно, не определено после раннего возврата

Новая версия Gatsby не работает с Material UI?

Не удалось загрузить pdf-файл (хранящийся в двоичном формате данных) из Mongo-db с помощью React JS

Как передать полученные данные в функцию getServerSideProps?

Бесконечная прокрутка цикла с использованием JavaScript работает неправильно

Как использовать @property в стилизованных компонентах?

Google GPT возвращает пустые объявления, при каких условиях

Вложенный маршрут React js заставляет useEffect с пустым массивом ([]) перезапускаться после его монтирования

React - значение Re-Render Grandchild Component при изменении реквизита не работает

Несколько условий для стилизации с помощью модулей Css

Ответы 2

Другие вопросы по теме

Похожие вопросы