Блог

Главная - Вопросы по программированию - Как использовать условные обозначения в React с CssModules

Как использовать условные обозначения в React с CssModules

#reactjs #css-modules

Вопрос:

Я пытаюсь использовать условный шрифт, но те же другие свойства в CSS.

Я хочу использовать cssmodules, чтобы у меня не было всего этого кода для каждой вкладки.

Это мой код:

 <Tab style={{textTransform: 'none' , fontWeight: (tabValue === 0) ? 'bold' : 'normal'}} label="Updates" />
<Tab style={{textTransform: 'none' , fontWeight: (tabValue === 0) ? 'bold' : 'normal'}} label="Authorize" />
<Tab style={{textTransform: 'none' , fontWeight: (tabValue === 0) ? 'bold' : 'normal'}} label="Historical" />

Могу ли я сделать это с помощью ifs внутри классов css.modules?

PD: Плюс я хочу использовать свои цвета констант в файле .module.css, возможно ли это?

 import { COLORS } from '../../services/Constants';

Ответ №1:

Для условных обозначений, зависящих от JS, я предпочитаю создавать два класса, в этом случае это было бы:

 .text_bold{
  font-weight: bold;
}
.text_normal{
  font-weight: normal;
}

А затем в своем коде используйте имя класса, предпочтительное для определенного компонента:

 import * as importedClasses from './yourCss.module.css'; //Somewhere on top
<Tab className={tabValue === 0 ? importedClasses.font_bold : importedClasses.font_normal} label="Updates" />

Также для нескольких имен классов:

 const fontClass = tabValue === 0 ? importedClasses.font_bold : importedClasses.font_normal;
<Tab className={`${fontClass} ${importedClasses.otherClass}`} label="Updates" />

Для вашего PS вам было бы намного проще, если бы вы использовали SASS/SCSS вместо CSS.

В SCSS вы можете импортировать файлы .scss в другие файлы .scss и использовать переменные так просто, как:

 $yourVar: #000000;
.yourClass {
  color: $yourVar;
}
Метки: