我如何使用一个主题来设置所有材质 UI 输入的样式，就好像它们有一个变体 ='outlined' 一样？ [复制]答案

【问题标题】：How can I us a theme to style all material-ui inputs as if they had a variant='outlined'? [duplicate]我如何使用一个主题来设置所有材质 UI 输入的样式，就好像它们有一个变体 ='outlined' 一样？ [复制]
【发布时间】：2020-04-21 06:12:55
【问题描述】：

我使用theming 来控制我的应用程序的整体样式，以及大量的TextField 组件。

我希望它们都默认显示为 variant='outlined'（因为尽管 MUI 有 explanations for it，但灰色框的用户体验很差 - 它看起来太像一个禁用的文本字段）。

使用我自己的 OutlinedTextField 组件（在此我覆盖默认变体并将所有其他道具传递给 TextField 不是一个选项，因为我使用诸如 rjsf-material-ui 之类的工具。

似乎我们可以设置变体（我看到它在他们的主题文档中注明here，但找不到示例，并且无法理解是否必须通过覆盖变体或通过更改全局 CSS 规则。

如何编辑主题以在所有 TextField 上使用 `variant='outlined'？

【问题讨论】：

是的！谢谢@Ryan - 很遗憾没有出现在我的搜索中！
谢谢，您节省了我的时间。你可以添加标签 rjsf 吗？这可以帮助人们找到这篇有用的帖子。
@UgoLfe 完成，虽然我不确定它是否完全合适，因为它不是问题的核心，但希望能帮助一些 rjsf 社区

标签： reactjs material-ui material-design textfield react-jsonschema-forms

【解决方案1】：

好的，我自己解决了。

在组件 API 页面的css 部分中找到要覆盖的组件的名称...https://material-ui.com/api/text-field/#css。在我的例子中，组件名称是MuiTextField。
你可以apply default props in the theme itself（我很困惑，因为我认为我必须覆盖css......不是这样）。

对于 MUI v4

const appThemeOptions = {
  ...baseThemeOptions,
  overrides: {
    // DON'T do it using css overrides like this one...
    MuiPaper: {
      rounded: {
        borderRadius: '0px',
      },
    },
  },
  // DO use the props directly
  props: {
    MuiTextField: {
      variant: 'outlined',
    },
  },
}
const appTheme = createMuiTheme(appThemeOptions)

对于 MUI v5

MUI v5 的 API 略有不同，您可以在其中覆盖 defaultProps 而不是道具（感谢 @Titenis 的评论）...

createTheme({
  components: {
    MuiTextField: {
      defaultProps: {
        variant: 'outlined',
      },
    },
  },
})

【讨论】：

MUI v5，API 略有不同createTheme({ components: { MuiTextField: { defaultProps: { variant: 'outlined', }, }, }, });
感谢@Titenis - 已编辑