css-to-mui-loader
Webpack loader for using external CSS files with Material UI.
Install | Usage | Description | Features | Demo | Linting | Help out
Install
npm install css-to-mui-loader
Dependency version support:
material-ui
- css-to-mui-loader@2.0.0 and up supports material-ui v4
- css-to-mui-loader@1.3.3 and down supports material-ui v3
jss
- css-to-mui-loader@2.0.1 and up supports jss v10
- css-to-mui-loader@1.3.3 and down supports jss v9
Usage
styles.css
MyComponent.js
;;; const MyComponent = <Button className=classesbutton> Click Me </Button>;
webpack.config.js
moduleexports = module: rules: test: /\.css$/ use: 'css-to-mui-loader'
Description
The css-to-mui-loader
allows you to write external CSS files then import them for use in your Material UI components. It provides shortcuts for accessing the Material UI theme within the CSS itself.
Why?
- CSS is more concise
- Designers don't want to write JS
- You can copy/paste CSS directly from Chrome Inspector
- You still get component-scoped CSS and a centralized theme
Features
Provides custom unit for Material UI spacing
Provides access to the Material UI theme
Supports media queries using the Material UI theme breakpoints
{}
Allows Material UI theme objects to be included as mixins
Supports classes, child selectors and pseudo-classes
Supports CSS variables
Supports keyframes
@ 100% }
If you want to know what the loader output looks like, take a look at the tests.
Demo
Check out the css-to-mui-loader-example repository for a bare-bones demo bootstrapped with create-react-app.
Linting
Some linters might complain about the custom syntax, but there are usually rules you can enable to address this. For example, the following .stylelintrc
for stylelint does not raise any errors with the custom css-to-mui-loader
syntax:
Help out
Pull requests, issues, complaints and suggestions are all welcome.