我如何使用带有 '.' 的参数 操作员？

我将 React 与 CSS Module 一起使用，我的代码有很多重复的行。

所以，我用函数来简化。这是我的代码。

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}`} />
                          .....

当我将 'color' 参数与 '.' 运算符一起使用时，出现了我的问题。它不起作用！

我该如何解决？

感谢您的阅读。