Webpack loader for using external CSS files with Material UI.
npm install css-to-mui-loader
Dependency version support:
- email@example.com and up supports material-ui v4
- firstname.lastname@example.org and down supports material-ui v3
- email@example.com and up supports jss v10
- firstname.lastname@example.org and down supports jss v9
;;;const MyComponent =<Button className=classesbutton>Click Me</Button>;
moduleexports =module:rules:test: /\.css$/use: 'css-to-mui-loader'
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.
- 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
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
If you want to know what the loader output looks like, take a look at the tests.
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
Pull requests, issues, complaints and suggestions are all welcome.