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. eg 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