Search code examples
javascriptreactjssasscss-modules

How can i use argument with '.' operator?

I use React with CSS Module and My code have many repetitive line.

So, I use function to make simple. here is my code.

const SassComponent = () => {
  function stylesBox(color) { return `${styles.box} ${styles}.${color}` }
  return (
    <div className={styles.SassComponent}>
        <div className={stylesBox('red')} />
        <div className={`${styles.box} ${styles.orange}`} />
        <div className={`${styles.box} ${styles.yellow}`} />
        <div className={`${styles.box} ${styles.green}`} />
                          .....

There is my problem when i use 'color' argument with '.'operator. It doesn't work!

How can i fixed it?

Thank you for reading.

Solution

  • Try:

    ${styles[color]}

    instead of

    ${styles}.${color}