How to change colors? about react-mdl HOT 11 CLOSED

how can i change the button color?

from react-mdl.

In case anyone else is curious, I fixed this issue by adding !important to the end of the color declaration ie

.header-color {
  background-color: black !important;
  opacity: 0.8;
}

from react-mdl.

If you're using the custom files we provide (which fixes an issue with the Layout component), that's unfortunately not possible for now...
If you don't use the layout component, you can safely use the CSS files provided by the MDL team.

from react-mdl.

As I thought...

What do you think to build the custom files with sass, less or anyone? Like Twitter Bootstrap http://getbootstrap.com/customize/ but more simple, just primary and accent color.

Can I change manually the colors using, I dont'n know, "cmd+f"?

Thanks!

from react-mdl.

I guess you can change colors and other variables using sass to compile material-design-lite and @import _layout.scss from extra folder instead of upstream like so (just copy original and change paths):

// Variables and mixins
@import "material-design-lite/src/variables";
...
@import "react-mdl/extra/layout";
...
@import "material-design-lite/src/grid/grid";

from react-mdl.

@faergeek Yep, but I think you should add a tilde in front of the module in scss, like so:

@import "~material-design-lite/src/variables";

Also the import of layouts.scss from react-mdl won't work directly because the file contains the following imports with relative paths:

@import "../variables";
@import "../mixins";

@tleunen maybe it would be good to change those two lines to:

@import "~material-design-lite/src/variables";
@import "~material-design-lite/src/mixins";

So that we can make a direct import without changing that file locally?

@import "~react-mdl/extra/layout";

from react-mdl.

@tleunen Why was this closed?

from react-mdl.

Because @slybridges said using ~ would fix the issue and we now use it in our scss patch file

from react-mdl.

@tleunen ok, I was trying to figure out if what I'm doing is fine and saw this. So far I've done:

// Variables and mixins
@import "./variables";
@import "~material-design-lite/src/variables";


@import "~material-design-lite/src/mixins";

// Resets and dependencies
@import "~material-design-lite/src/resets/resets";
@import "~material-design-lite/src/typography/typography";

// Components
@import "~material-design-lite/src/palette/palette";
@import "~material-design-lite/src/ripple/ripple";
@import "~material-design-lite/src/animation/animation";
@import "~material-design-lite/src/badge/badge";
@import "~material-design-lite/src/button/button";
@import "~material-design-lite/src/card/card";
@import "~material-design-lite/src/checkbox/checkbox";
@import "~material-design-lite/src/data-table/data-table";
@import "~material-design-lite/src/dialog/dialog";
@import "~material-design-lite/src/footer/mega_footer";
@import "~material-design-lite/src/footer/mini_footer";
@import "~material-design-lite/src/icon-toggle/icon-toggle";
@import "~material-design-lite/src/list/list";
@import "~material-design-lite/src/menu/menu";
@import "~material-design-lite/src/progress/progress";
@import "~material-design-lite/src/radio/radio";
@import "~material-design-lite/src/slider/slider";
@import "~material-design-lite/src/snackbar/snackbar";
@import "~material-design-lite/src/spinner/spinner";
@import "~material-design-lite/src/switch/switch";
@import "~material-design-lite/src/tabs/tabs";
@import "~material-design-lite/src/textfield/textfield";
@import "~material-design-lite/src/tooltip/tooltip";
@import "~material-design-lite/src/shadow/shadow";
@import "~material-design-lite/src/grid/grid";

/* Fixes small screen layout for navbar */
@import "~react-mdl/extra/layout";

which seems to render everything but the hamburger icon

from react-mdl.

The ./variables is my variable that sets the colors I need. As a a suggestion, I love the way material-ui does this with a ThemeComponent:

http://www.material-ui.com/#/customization/themes

So it might be worth adding that to this project. They do it with inline-css which is why I'm not using them. In here we'd have to make it work with something that is extractable.

from react-mdl.

Yes, I'm also very interested in improving the way we can customize the components. With our v2, I wanted to remove all the direct css dependency to have each component have their own css dependency (using css-modules or something similar). But I didn't get the time right now to investigate all this.

Then with a root "ThemeProvider", we could indeed let the user choose the main theme color he want to use, probably based on this: https://getmdl.io/customize/index.html

Feel free to jump in, try a few things and propose something in a PR ;)

from react-mdl.