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

Posted 2023-02-22

【中文标题】我如何使用一个主题来设置所有材质 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 社区

【参考方案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 - 已编辑