Блог

Я хочу объединить классы начальной загрузки react js для моей кнопки вместе с моим позиционирующим css из моего модуля css для кнопки, но я не могу объединить оба для работы.

<button className= {'btn btn-primary ${styles.bottomButton}} onClick={(e) => logout(e)}>

Сначала вам нужно импортировать файл CSS следующим образом:

 import classes from "./Navbar.module.css"; 
 

Затем вы можете использовать это следующим образом (используя шаблонные литералы или обратные ссылки):

 className={`navbar navbar-expand-lg navbar-light bg-light ${classes.mainnavbar}`}
 

Получил его с помощью

<кнопка className= {‘btn btn-primary’ ‘ ‘ styles.bottomButton} onClick={(e) => выход (e)}>

Если вы хотите легко применять стили, вы можете использовать пакет patch-styles . Для более расширенного использования см. Пример в StackBlitz . Это вводит более декларативный способ применения стилей; вам нужно обернуть свой код с <PatchStyles classNames={styles}> помощью where styles по умолчанию импортирует модуль стиля. Со всем, что вы можете просто написать:

 <PatchStyles classNames={styles}>
  <button className="btn btn-primary bottomButton" onClick={(e) => logout(e)}>...</button>
</PatchStyles>
 

Вы можете использовать backticks представленный в ES2015.

 className={`btn btn-primary ${styles.bottomButton}`}