React 中的 InputProps Material-UI答案

【问题标题】：InputProps Material-UI in ReactReact 中的 InputProps Material-UI
【发布时间】：2021-08-05 19:22:59
【问题描述】：

我必须将 material-ui 中的TextField 设为大写。现在，我需要将inputProps={{ style: { textTransform: 'uppercase' } }} 放入所有TextField 中。所以我在我的 react 应用程序中为此定义了一个主题，我想要一些看起来像这样的东西。

请查看图片，了解我是如何做到的

https://i.stack.imgur.com/lnukB.png

MuiTextField.js

export default {
  root: {
    textTransform: 'capitalize',
  },
};

【问题讨论】：

您好 Joseph，我认为您在这里是正确的。你只需要用ThemeProvider 包装你的顶级组件，它将你的自定义theme 对象作为参数。例如参考 - Material UI example
@jaybhatt。是的，我做到了。但我的问题是当我开始输入时，我需要将输入的文本转换为大写。
那么您是否希望该值每次都为大写，或者您是否只想使用您上面所做的textTransform 显示它正在更改为大写以便 UI 使用？
@jaybhatt。一直都是大写
我认为在这种情况下你能做的最好的事情就是创建一个通用处理程序，它总是将值更改为大写并使用它。

标签： reactjs react-hooks material-ui react-material

【解决方案1】：

您可以在项目的每个MuiInputBase 类中创建theme 并将textTransform 覆盖为capitalize，如下所示：

const theme = createMuiTheme({
  overrides: {
    MuiInputBase: {
      input: {
        textTransform: "uppercase"
      }
    }
  }
});

然后将您的项目包装在ThemeProvider 中，并将theme 作为道具传递给ThemeProvider：

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <Demo />
  </ThemeProvider>,
  document.querySelector("#root")
);

sandbox link

使用此方法，您不再需要手动将textTransform: "capitalize" 添加到每个TextField 组件中。

【讨论】：

这不起作用。你的代码框也没有大写。
对不起，我更新了答案。请检查它并再次链接。我将capitalize 更改为uppercase，在这种情况下这是正确的值