css - 无法覆盖 Material-UI 主题样式

Question

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

在 custom styling 上查阅文档通知我应该使用内联样式或自定义类。

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

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

Answer 1

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

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

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

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