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

Question

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

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

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

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

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

Answer 1

好吧，我自己解决了。

1. css在组件 API 页面的部分中找到要覆盖的组件的名称... https://material-ui.com/api/text-field/#css。就我而言，组件名称是MuiTextField.

2. 您可以在主题本身中应用默认道具（我很困惑，因为我认为我必须覆盖 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 和 v6

MUI v5 有一个稍微不同的 API，您可以在其中覆盖defaultProps而不是 props（感谢 @Titenis 的评论）...

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