5

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

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

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

似乎我们可以设置变体（我在他们的主题文档中看到了它，但找不到示例，并且无法通过覆盖变体或更改全局 css 规则来解决我的问题.

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

4

1 回答 1

7

好的，自己解决了。

  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

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

createTheme({
  components: {
    MuiTextField: {
      defaultProps: {
        variant: 'outlined',
      },
    },
  },
})
于 2020-01-02T15:27:33.367 回答