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 its 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>
Install the plugin with npm:
npm install --save-dev override-material-ui-cssRequire 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
- 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
Thanks goes to these wonderful people (emoji key):
 Max Liu 💻 📖 🚇 |
This project follows the all-contributors specification. Contributions of any kind welcome!