Почему выдает ошибку в className (React)?

Рейтинг: 0Ответов: 1Опубликовано: 03.02.2023
Я по всякому пытаюсь "прикостылить" classChanger к style в className. Но ничего не выходит. Если бы был обычный className, то все сработало бы. Но я с css модулями работаю. А со style я видимо делаю что-то не так. Требуется помощь знатоков :) 

    import styles from "./Card.module.scss";
// импортирую объект styles из соответствующего scss модуля

    const Card = () => {
      const [colorCard, setColorCard] = useState("cardWhite");
      const classChanger = colorCard ? "cardWhite" : "cardGreen";
      const onclickCard = () => setColorCard(!colorCard);
      
    
         
      return (
        <div className={styles.`${classChanger}`} onClick={() => onclickCard()}>
          Card
        </div>
      );
    };
css javascript reactjs
Источник: Stack Overflow на русском

Ответы

▲ 1

Попробовал так как в коде ниже. Все теперь работает, как я хотел

import styles from "./Card.module.scss";

const Card = () => {
  const [colorCard, setColorCard] = useState("cardWhite");
  const classChanger = colorCard ? "cardWhite" : "cardGreen";
  const onclickCard = () => setColorCard(!colorCard);
  console.log(colorCard);

  return (
    <div className={styles[classChanger]} onClick={() => onclickCard()}>
      Card
    </div>
  );
};

export default Card;