-2

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.

Mahesh Reddy
  • 34
  • 6

3 Answers3

0

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
  }
 }
SM Chinna
  • 341
  • 2
  • 7
  • I can override in css but I want css in Js. https://material-ui.com/styles/basics/ in this demo they are using styling in Js. In the same way how can I override bootstrap or any other 3rd party plugins in Js. – Mahesh Reddy Aug 23 '19 at 15:09
  • Yeah..Use styled-components mpm package. You can pass props to the CSS Components. So you can achieve whatever you want. – SM Chinna Aug 24 '19 at 08:36
  • We can try below way to override global styles.https://material-ui.com/customization/globals/#global-css – Mahesh Reddy May 29 '20 at 16:49
0

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

Mahesh Reddy
  • 34
  • 6
0

You can use template literal in js:

<span className={`mt text_bold ${classes.loginTitle }`}>Login to Synapse</span>
tdy
  • 36,675
  • 19
  • 86
  • 83
kiarash shamaii
  • 16
  • 2