Currently, it works with react >= 0.13, including 0.14.0-beta1
Because of this decision. I'm in a situation where upgrading to material-ui v0.8 would've been too time-consuming to refactor the entire project in favor of their inline-js styles. And so, material-ui-with-sass was born. It's currently pretty far behind the original material-ui, but if you find this useful, please contribute! This repo could use some love.
Check out our github io site for live examples. Although this looks identical to material-ui's demo site, it has been updated to reflect material-ui-with-sass's current state.
- Uses SASS instead of inline-styles or Less (obviously)
- New Accordion Component!
- We've added a SpeedDial to our FloatingActionButton
- New Card Component!
- Dialog Component has been improved
- Material fonts and icons are automatically included (from Google's CDN). Plus, a handy new Icon Component
- Tabs are more customizable
- react-tap-event-plugin is no longer a dependency. Due to this bug We have removed all references of "TouchTap" and replaced with "Click", for the time being
material-ui-with-sass is available as an npm package.
npm install material-ui-with-sass
The styles are separated into 2 sass files:
It is important that when you compile the sass that you use something like autoprefixer!
This allows you to override any variables defined in _custom-variables.scss without having to modify material-ui-with-sass source files directly. For example, your main.scss file could look something like this:
"node_modules/material-ui-with-sass/src/sass/scaffolding";// Define a custom sass file to override any variables defined in scaffolding.scss"my-custom-overrides.scss";"node_modules/material-ui-with-sass/src/sass/components";
Once material-ui-with-sass is included in your project, you can use the components this way:
/** MyAwesomeReactComponent.jsx */var React =var mui = ;var MyAwesomeReactComponent = React;moduleexports = MyAwesomeReactComponent;
This project is seriously lagging behind the original material-ui, but I'm hoping there are enough people who want to use material-ui, but either didn't want to, or simply couldn't refactor the entire project to use inline-js styling, that this will gain a little popularity. Please contribute if you can!
This project is licensed under the terms of the MIT license