Full Explanation of Customizing Material-UI theme?

1

I read this thread and the docs but I’m still not totally clear on how/where to do this. What needs to be imported? What should be exported?

I have my theme wrapping my react-router right now.

right now I have myimports/startup/client/index.js looking like this:

import { Bert } from 'meteor/themeteorchef:bert';
import './routes.js';
import injectTapEventPlugin from 'react-tap-event-plugin';
import { DocHead } from 'meteor/kadira:dochead';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

// injects google fonts
Meteor.startup(function(){
		var linkInfo = {rel: "stylesheet", type: 'text/css', href: "https://fonts.googleapis.com/css?family=Roboto:300,300italic,400,400italic,500,500italic,700,100italic,100,700italic,900,900italic"};
		DocHead.addLink(linkInfo);
});

injectTapEventPlugin(); // required by material ui: http://www.material-ui.com/#/get-started/installation

Bert.defaults.style = 'growl-top-right';



// color pallete styles
const appPalette = {
	primary1Color: "#000000",
	primary2Color: "#2173B3",
	primary3Color: "#A9D2EB",
	accent1Color: "#ED3B3B",
	accent2Color: "#ED2B2B",
	accent3Color: "#F58C8C"
	// rest of the palette is set from Theme Manager
};

var ThemeManager = new MUI.Styles.ThemeManager();
ThemeManager.setTheme(ThemeManager.types.LIGHT);
ThemeManager.setPalette(appPalette);

I’m getting a error ncaught ReferenceError: MUI is not defined

some more discussion here:

1 Like
2

ThemeManager was deprecated a while ago, that’s why it’s not in the docs…

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

const customTheme = {
  palette: { 
    primary1Color: cyan500,
    primary2Color: cyan700,
    primary3Color: grey400
  }
};

const theme = getMuiTheme(customTheme);

<MuiThemeProvider muiTheme={theme} />

Have a look at

and

for options

1 Like