reactjs InputProps Material-UI in React

yacmzcpb  于 2023-06-05  发布在  React
关注(0)|答案(1)|浏览(197)

我必须使material-ui中的TextField大写。现在,我需要将inputProps={{ style: { textTransform: 'uppercase' } }}放入所有TextField中。所以我在我的react应用程序中定义了一个主题,我想让它看起来像这样。
也请检查图片上我是如何做的
https://i.stack.imgur.com/lnukB.png

MuiTextField.js

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

ibps3vxo1#

您可以创建一个theme,并在项目的每个MuiInputBase类中将textTransform重写为capitalize,如下所示:

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

然后将你的项目 Package 在一个ThemeProvider中,并将theme作为prop传递给ThemeProvider

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

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

相关问题