Material-UI 应用栏标题样式答案

【问题标题】：Material-UI app bar title stylingMaterial-UI 应用栏标题样式
【发布时间】：2017-08-08 12:38:11
【问题描述】：

是否可以从 Material-UI 标题设置 AppBar 的样式，而不是内联方式？我有一个单独的 css 文件，例如我想更改标题的大小。

这样的：

.app-bar title {
    font-size: 120px !important;
}

谢谢你:)

【问题讨论】：

【解决方案1】：

我解决了这个问题。解决方案：

 <AppBar className="app-bar"
                            title={<div className="app-bar-title">Tomek The Title</div>}

然后可以在css文件中添加样式。

【讨论】：

【解决方案2】：

尝试.app-bar h1 或.app-bar * 设置css 代码样式，然后将.app-bar 放到AppBar Component className

【讨论】：

【解决方案3】：

正如您在文档中看到的那样，http://www.material-ui.com/#/components/app-bar 组件接受 className 作为包装器，并且具有没有类的 h1 标签，因此您可以尝试：

.app-bar h1 {
font-size: 120px !important;

}

和

<AppBar className='app-bar' />

【讨论】：

我解决了这个问题，但是 !importants 因为其他方式不起作用，到目前为止它看起来像这样： .app-bar { background-color: #de6927 !important;位置：固定！重要；顶部：0！重要；显示：弹性！重要；弹性方向：行！重要；对齐项目：中心！重要； }