无法覆盖 Material-UI 主题样式

Question

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

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

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

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

Answer 1

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

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

Answer 2

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

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

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

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

无法覆盖 Material-UI 主题样式

Unable to override Material-UI theme styles

css

reactjs

material-ui