React 中的 InputProps Material-UI

Question

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

还请检查我如何做的图片

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

MuiTextField.js

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

Answer 1

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

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

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

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

沙盒链接

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