有没有更好的方法在 React 应用程序中使用 CSS 模块应用主题？

问题描述

我在 React 应用程序中使用 CSS 模块作为样式解决方案，我有一个深色和浅色主题。目前，我使用这种方法根据当前主题设置组件样式：

  import styles from './NominationsList.module.scss'
  //......
  <p
    className={`${styles.nominationsHeader} ${
      isDarkMode ? styles.nominationsHeaderDark : styles.nominationsHeaderLight
    }`}
  >
   Some text here...
  </p>

即使它有效，也必须有更好的方法来做到这一点。我很感激任何建议。谢谢。

解决方法

许多库（例如 MaterialUI）提供管理主题的机制，但如果您不使用其中任何一个，我建议您查看 https://usehooks.com/useTheme/ 中的 useTheme 挂钩。

基本上，您需要定义一个暗模式主题和一个亮模式主题，然后使用 useTheme() 指定当前主题，然后根据需要引用主题类，无需任何额外的条件逻辑。