override-material-ui-css

Material-UI is a cool react component library and it's using JSS as styling solution. The CSS injected by Material-UI to style a component has the highest specificity possible as the <style> is injected at the bottom of the <head> to ensure the components always render correctly. You need to change the order of the <style> injected by Material-UI if you want to override the it's default style

This library is a wrapper component which only takes the children prop and renders it without any modification but just moving Material-UI's <style> tag to the top of the <head> tag. It will make overriding style very easy.

PS: OverrideMaterialUICss will add CSS Baseline. It's provided by Material-UI to kickstart an elegant, consistent, and simple baseline to build upon. It's not a must have thing and you can disable this feature by setting useCssBaseline to false. Eg: <OverrideMaterialUICss useCssBaseline={false}> <button>testButton</button> </OverrideMaterialUICss>

override-material-ui-css

Installation

Install the plugin with npm:

npm install --save-dev override-material-ui-css

Basic Usage

Require the plugin in your index.js:

import { OverrideMaterialUICss } from "override-material-ui-css"

Wrap your component with OverrideMaterialUICss :

<OverrideMaterialUICss> <button>testButton</button> </OverrideMaterialUICss>

For more details, please check: Live examples

Contributing

Fork it (https://github.com/nerdmax/override-material-ui-css/fork)
Create your feature branch (git checkout -b feature/fooBar)
Commit your changes (git commit -am 'Add some fooBar')
Push to the branch (git push origin feature/fooBar)
Create a new Pull Request

Contributors

Thanks goes to these wonderful people (emoji key):

_{Max Liu}
💻 📖 🚇 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!