How to Pass in Props When Using CSS Modules

Question

I have a button component and using Tailwindcss framework and css modules for additional styling which looks like the following. This works as I'm using template literal to pull in the red background styling.

CSS Module:

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

React Component:

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

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

But what if I wanted the background to be flexible and receive props in order to determine background color? I was thinking something like the below but obviously doesn't work:

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

Eric Nguyen · Accepted Answer · 2020-03-25 05:47:56Z

4

Turns out, this is the correct syntax:

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

answered Mar 25, 2020 at 5:47

Eric Nguyen

1,0364 gold badges17 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to Pass in Props When Using CSS Modules

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related