Next.jsでコンポーネントにクラス名を渡す

Question

以下のようなButtonコンポーネントにpropsでクラス名を渡したい(<Button color="red">)のですが、cssが適用されません。

◼️Button.tsx
import styles from './button.module.css';
type props {
color: string
}
export const Button: FC<props> = ({ color }) => (
<button className={styles.color}ボタン</button>
)

◼️button.module.css
.red {
color: red;
}

対応方法についてご教示いただければ幸いです。

Answer 1

- <button className={styles.color}ボタン</button>
+ <button className={styles.red}ボタン</button>