Adding Bootstrap CSS along with CSS Module in classname in React

Question

I want to combine the react js bootstrap classes for my button along with my positioning css from my css module for the button but am not able to combine both to work.

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

Answer 1

Got it using

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

Answer 2

First, you need to import the CSS file like this:

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

Then, you can use that in below way (using template literals or backticks):

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

Answer 3

You can make use of the backticks introduced in ES2015.

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

Answer 4

If you want to apply styles easily, you can use the patch-styles package. For more advanced usage, see the example in StackBlitz. It's introducing a more declarative way for applying styles; you need to wrap your code with <PatchStyles classNames={styles}> where styles is the default import the style module. With all that you can just write:

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