override-material-ui-css
v1.1.4
Published
This is a library for overriding Material-UI's default CSS.
Downloads
13
Maintainers
Readme
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-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):
This project follows the all-contributors specification. Contributions of any kind welcome!