reactjs InputProps Material-UI in React

yacmzcpb 于 2023-06-05 发布在 React

关注(0)|答案(1)|浏览(196)

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

MuiTextField.js

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

reactjs

来源：https://stackoverflow.com/questions/67554308/inputprops-material-ui-in-react

1条答案

按热度按时间

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组件。

赞(0）回复(0）举报 2023-06-05

我来回答

reactjs InputProps Material-UI in React

1条答案

相关问题

热门标签

最新问答