无法覆盖 Material-UI 主题样式答案

【问题标题】：Unable to override Material-UI theme styles无法覆盖 Material-UI 主题样式
【发布时间】：2016-11-16 18:18:48
【问题描述】：

我在一个项目中使用Material-UI，我试图覆盖textTransform:"uppercase" 的默认主题样式，而是将其替换为textTransform:"capitalize"。

查阅 custom styling 上的文档告诉我应该使用内联样式或自定义类。

添加className="capitalize"（在类中具有text-transform 属性）或添加style={{textTransform: "capitalize"}} 会产生相同的结果。父 div 传递了 CSS 属性，但最终被子 span 覆盖。

这是intended behavior，还是我做错了什么？

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

您可以使用自定义主题来覆盖 textTransform：

const App = () => {
    const customTheme = { button: { textTransform: 'capitalize' } };

  return (
    <MuiThemeProvider muiTheme={getMuiTheme(customTheme) }>
      <Example />
    </MuiThemeProvider>
  )
};

工作 jsFiddle：https://jsfiddle.net/88uq8751/7/

【讨论】：

这对我的目的非常有用，谢谢。出于好奇，有什么方法可以更改单个按钮，而不是所有按钮（就像更改主题文件那样）？
是的。在 RaisedButton 或 FlatButton 上使用 labelStyle 属性：labelStyle={{ textTransform: 'capitalize' }}

【解决方案2】：

请在您的问题中提供更多信息。但是，我认为这不是预期的行为。我想，请检查您的其他道具，也许使用这些道具，样式道具的效果会被覆盖。

如果这不是原因，请检查 GitHub 上的 material-ui repo 代码库。根据我使用 material-ui 的经验，我通过浏览他们的代码库而不是使用他们的文档解决了许多问题。希望信息有所帮助。

【讨论】：