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

Question

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

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

尽管它有效，但必须有更好的方法来做到这一点。我将不胜感激任何建议。谢谢你。

Answer 1

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

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

Answer 2

我喜欢this方法，因为它还可以考虑用户的方案偏好。它利用变量和属性来解决这些条件类的问题。