material-ui-with-sass

0.1.17 • Public • Published

material-ui-with-sass

material-ui-with-sass is a combination fork of material-ui@v0.7.5 and material-ui-sass that still uses traditional css (well, sass) to apply styles.

Currently, it works with react >= 0.13, including 0.14.0-beta1

Why?

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.

Documentation/Examples

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.

Notable Differences

Installation

material-ui-with-sass is available as an npm package.

npm install material-ui-with-sass

Styling

The styles are separated into 2 sass files:

  • src/sass/scaffolding.scss
  • src/sass/components.scss

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:

@import "node_modules/material-ui-with-sass/src/sass/scaffolding";
 
// Define a custom sass file to override any variables defined in scaffolding.scss 
@import "my-custom-overrides.scss";
 
@import "node_modules/material-ui-with-sass/src/sass/components";

Usage

Once material-ui-with-sass is included in your project, you can use the components this way:

/** MyAwesomeReactComponent.jsx */
 
var React = require("react"),
var mui = require("material-ui-with-sass");
 
var MyAwesomeReactComponent = React.createClass({
  render: function() {
    return (
      <mui.RaisedButton label="Default" />
    );
  }
});
 
module.exports = MyAwesomeReactComponent;

Contribute

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!

License

This project is licensed under the terms of the MIT license

Package Sidebar

Install

npm i material-ui-with-sass

Weekly Downloads

116

Version

0.1.17

License

MIT

Last publish

Collaborators

  • sarink