Блог

Я использую модули CSS в качестве стилистического решения в своем приложении React, и у меня есть темная и светлая темы. В настоящее время я использую этот подход для оформления компонента на основе текущей темы:

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

Даже если это работает, должен быть лучший способ сделать это. Я был бы признателен за любой совет. Спасибо.

Ряд библиотек, таких как MaterialUI, предоставляют механизмы для управления темами, но если вы не используете ни одну из них, я бы порекомендовал вам проверить хук useTheme по адресу https://usehooks.com/useTheme /.

В принципе, вы бы определили их в темном режиме и тему в светлом режиме один раз, указали текущую с помощью useTheme(), а затем ссылались на классы темы по мере необходимости без какой-либо дополнительной условной логики.