React 中的 InputProps Material-UI

Question

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

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

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

MuiTextField.js

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

Answer 1

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

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

然后将您的项目包装在 ThemeProvider 中并将 theme 作为 prop 传递给 ThemeProvider:

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

sandbox link

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