material-ui 在自定义主题中定义样式答案

【问题标题】：material-ui defining styles in custom themematerial-ui 在自定义主题中定义样式
【发布时间】：2016-06-15 08:28:41
【问题描述】：

我正在使用react with material-ui，我想覆盖主题以匹配我自己的需求，我看到你可以更改每个组件的所有属性，但我试图改变appbar的样式但什么也没发生。

这是我尝试过的：

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

我知道我可以只更改应用栏的高度，但可以说我想更改不是属性的东西，例如抽屉样式中的“顶部”，如下所示：

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

那我该怎么做呢？

【问题讨论】：

【解决方案1】：

尝试在没有 style 属性的情况下设置值。

所以而不是：

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

改为：

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

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

【讨论】：

是的，那些只能在样式中更改的属性呢？
如果是 material-ui 主题中不存在的属性，则不需要覆盖它们，您可以使用选择器简单地使用常规的老式 css 样式。也就是说，如果不是material-ui主题中的key，就是没有预定义的，所以就和以前一样的style就行了。

【解决方案2】：

您只能在theme 对象中设置有限范围的属性。您可以通过此online tool 发现所有受支持的属性以及它们如何更改外观。如果你在theme 中没有你需要的东西，那么你可以通过style 属性手动设置它。

注意，Material-UI 组件中通常有一些“样式”属性。例如style、titleStyle、iconStyleLeft、iconStyleRight 为App bar。

【讨论】：

【解决方案3】：

帕楚。回答您的问题：“如何更改 Material-ui 的主题？”。你可以试试：

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

【讨论】：