How can override bootstrap classes with withStyles in material UI

Question

I want to override some of bootstrap classes.Currently I'm using withStyles of material UI in this I can write css in Js format for my own classes.But I want to override bootstrap classes of some buttons, container etc...In material UI it will generate class names dynamically. I can do with scss but I'm using theme changer in my application.

I except the overriding of bootstrap classes by using withStyles of material UI.

Answer 1

Wrap Bootstrap Classes with HTML Tag and write CSS for the HTML Tag. Example

 <div className="customButtonWrapper">        //JSX file
   <BootstrapButton></BootstrapButton>
 </div>


.customButtonWrapper {                         //CSS file
   >button {
    background-color: red !important
  }
 }

Answer 2

By using global styles of css in js we can override the styles of any third party library.

Please refer below link for overriding the global styles

https://material-ui.com/customization/globals/#global-css

Answer 3

You can use template literal in js:

<span className={`mt text_bold ${classes.loginTitle }`}>Login to Synapse</span>