material-ui defining styles in custom theme

Question

I'm using react with material-ui, and I want to override the theme to match my own needs, I saw that you can change all of the properties of each component, but I tried to change the style of the appbar but nothing happend.

Here is what I tried:

let theme = {
    appBar: {
        style:{
            height: 128
        }
    }
}

I know I can just change the height of the appbar but lets say I want to change something that is not a property, like the 'top' in the drawer's style, like this:

let theme= {
    drawer:{
        style:{
            top: 64
        }
    }
}

So how can I do that?

Answer 1

Try setting the values without the style prop.

So instead of:

let theme = {
    appBar: {
        style:{
            height: 128
        }
    }
}

Change to:

let theme = {
    appBar: {            
        height: 128
    }
}

//Example
const muiTheme = getMuiTheme(theme);
...

Answer 2

You can setup only limited range of properties within theme object. You can discover all supported properties and how they changes the appearance via this online tool. If you don't have what you need in theme so you may setup it manually via style properties.

Notice, that usually there are some "style" properties in Material-UI components. e.g. style, titleStyle, iconStyleLeft, iconStyleRight for App bar.

Answer 3

Pachu. For answering your question: "how to change the Material-ui's theme?". You can try it:

const muiTheme = getMuiTheme({
   palette: {
     textColor: cyan500,
   },
   appBar: {
     height: 50,
   },
});

You can refer this link: http://www.material-ui.com/#/customization/themes