[英]How can I set the value of my MaterialUI TextField to uppercase?
I have a Material UI TextField as an input and I need to force the entered text as uppercase.我有一个 Material UI TextField 作为输入,我需要将输入的文本强制为大写。 I have tried using textTransform: "uppercase"
as part of the style attribute but this does not seem to work.我尝试使用textTransform: "uppercase"
作为样式属性的一部分,但这似乎不起作用。 All of the other styling in my component is applied correctly however the textTransform is not.我的组件中的所有其他样式都正确应用,但 textTransform 没有。
I have also tried using the standard style method of passing my style as a prop to the component but I get the same result.我也尝试使用标准样式方法将我的样式作为道具传递给组件,但我得到了相同的结果。
My component:我的组件:
const MenuInput = (props) => {
const useStyles = makeStyles((theme) => ({
input: {
textTransform: "uppercase",
marginTop: "10px",
width: "100%",
borderRadius: 4,
backgroundColor: "#FFFFFF",
},
}));
const classes = useStyles();
return (
<TextField
className={classes.input}
id={props.id}
color="primary"
label={props.label}
variant="filled"
onChange={(e) => props.onChange(e)}
error={props.isError}
helperText={props.error}
/>
);
};
The output: output:
You could try applying styles through the inputProps
like the following:您可以尝试通过inputProps
应用 styles,如下所示:
<TextField
className={classes.input}
id={props.id}
color="primary"
label={props.label}
variant="filled"
onChange={(e) => props.onChange(e)}
error={props.isError}
helperText={props.error}
inputProps={{ style: { textTransform: "uppercase" } }}
/>
I'll leave a link with a sandbox where I tested that solution.我将留下一个链接,其中包含我测试该解决方案的沙盒。
try adding important textTransform: "uppercase !important"尝试添加重要的 textTransform: "uppercase !important"
Or add inline style <Textfield style={{textTransform:"uppercase"}} />或者添加内联样式 <Textfield style={{textTransform:"uppercase"}} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.