[英]InputProps Material-UI in React
I have to make the TextField
in material-ui to be uppercase.我必须将 material-ui 中的
TextField
设为大写。 Right now, I need to put inputProps={{ style: { textTransform: 'uppercase' } }}
in everything TextField
.现在,我需要将
inputProps={{ style: { textTransform: 'uppercase' } }}
放在所有TextField
中。 So I have define a theme in my react app for this and I wanted something to look like this.所以我在我的反应应用程序中为此定义了一个主题,我想要一些看起来像这样的东西。
Please also check picture on how I do them还请检查我如何做的图片
https://i.stack.imgur.com/lnukB.png https://i.stack.imgur.com/lnukB.png
MuiTextField.js MuiTextField.js
export default {
root: {
textTransform: 'capitalize',
},
};
You can create a theme
and override the textTransform
to capitalize
in every MuiInputBase
class of your project, as below:您可以创建一个
theme
并覆盖textTransform
以在项目的每个MuiInputBase
class 中capitalize
,如下所示:
const theme = createMuiTheme({
overrides: {
MuiInputBase: {
input: {
textTransform: "uppercase"
}
}
}
});
then wrap your project in a ThemeProvider
and pass theme
as a prop to the ThemeProvider
:然后将您的项目包装在
ThemeProvider
中并将theme
作为道具传递给ThemeProvider
:
ReactDOM.render(
<ThemeProvider theme={theme}>
<Demo />
</ThemeProvider>,
document.querySelector("#root")
);
Using this method, you no longer need to manually add textTransform: "capitalize"
to every TextField
component.使用此方法,您不再需要手动将
textTransform: "capitalize"
添加到每个TextField
组件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.