我怎样才能使用一个主题来设置所有 material-ui 输入的样式，就好像它们有一个 variant='outlined'？

Question

我全程使用 theming to control the overall styling of my app, and a large number of TextField 个组件。

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

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

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

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

Answer 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',
      },
    },
  },
})

我怎样才能使用一个主题来设置所有 material-ui 输入的样式，就好像它们有一个 variant='outlined'？

How can I us a theme to style all material-ui inputs as if they had a variant='outlined'?

textfield

reactjs

material-design

material-ui

react-jsonschema-forms

对于 MUI v4

对于 MUI v5