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>
Installation
Install the plugin with npm:
npm install --save-dev override-material-ui-cssBasic Usage
Require the plugin in your index.js:
Wrap your component with OverrideMaterialUICss :
testButton 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!