Как перейти в реквизит при использовании CSS модулей - PullRequest
Новая
       36

Как перейти в реквизит при использовании CSS модулей

0 голосов
/ 25 марта 2020

У меня есть компонент кнопки и я использую Tailwind css framework и css модули для дополнительного стиля, который выглядит следующим образом. Это работает, так как я использую шаблонный литерал для выделения стиля красного фона.

CSS Модуль: 

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

Реагирующий компонент: 

import styles from "./style.module.css"

const Button = props => {
  return (
    <button
      className={`text-white py-2 px-4 rounded ${styles.red}`}
    >
      Button
    </button>
  )
}

Но Что делать, если я хотел, чтобы фон был гибким и получал реквизит для определения цвета фона? Я думал что-то вроде ниже, но, очевидно, не работает: 

<button
  className={`text-white py-2 px-4 rounded ${styles.`${props.bgColor}`}`}
>

1 Ответ

0 голосов
/ 25 марта 2020

Оказывается, это правильный синтаксис: 

<button
   className={`text-white py-2 px-4 rounded ${styles[props.bgColor]}`}
>
...