如何将 MaterialUI TextField 的值设置为大写？答案

【问题标题】：How can I set the value of my MaterialUI TextField to uppercase?如何将 MaterialUI TextField 的值设置为大写？
【发布时间】：2021-04-16 21:50:56
【问题描述】：

我有一个 Material UI TextField 作为输入，我需要将输入的文本强制为大写。我尝试使用textTransform: "uppercase" 作为样式属性的一部分，但这似乎不起作用。我的组件中的所有其他样式都已正确应用，但 textTransform 没有。

我也尝试使用标准样式方法将我的样式作为道具传递给组件，但我得到了相同的结果。

我的组件：

  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}
    />
  );
};

输出：

【问题讨论】：

标签： reactjs input material-ui styles textfield

【解决方案1】：

您可以尝试通过inputProps 应用样式，如下所示：

 <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" } }}
/>

我将留下一个 link 和一个我测试该解决方案的沙箱。

【讨论】：

正是我所需要的谢谢，输入属性是专门为输入字段设置样式的吗？
是的，您可以为input 组件（TextField 的孩子）指定道具。

【解决方案2】：

尝试添加重要的 textTransform: "大写！重要"

或者添加内联样式

【讨论】：