How can i use argument with '.' operator?

Question

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.

Answer 1

Try:

${styles[color]}

instead of

${styles}.${color}