时间戳

首页 > 解决方案 > React 中的 InputProps Material-UI

reactjs - React 中的 InputProps Material-UI

问题描述

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

还请检查我如何做的图片

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

MuiTextField.js

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

标签： reactjsreact-hooksmaterial-uireact-material

解决方案

您可以在项目的每个类中创建theme并覆盖textTransformto ，如下所示：capitalizeMuiInputBase

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

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

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

沙盒链接

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

推荐阅读