带有多行道具的 Material-UI 文本字段不适用于概述的值的变体道具

如何解决带有多行道具的 Material-UI 文本字段不适用于概述的值的变体道具

我正在尝试使用 material-UI 文本字段作为带有多行道具的文本区域，但根据行道具，它的高度并没有变大，尽管如果我删除道具变体 =“轮廓”，它会得到虽然我在代码沙箱中尝试了相同的道具并且它工作得很好但不是在这里，但开始工作只是不使用轮廓边界，请指出我做错了什么？

import { withStyles,Grid,TextField } from '@material-ui/core';
const textFieldStyle = {
  background: '#ffff',borderRadius: 5,width: '100%',};
const StyledTextArea = withStyles({
  root: {
    '& .MuIoUtlinedInput-root > .MuiInputBase-input': {
      fontSize: 13,},})(TextField);
export default function Template(props) {
  return (
    <React.Fragment>
      <Grid container>
        <Grid item xs={7}>
          <StyledTextArea
            id="outlined-multiline-static"
            label="Multiline"
            multiline
            rows={4}
            defaultValue="Default Value"
            variant="outlined"
            style={{ ...textFieldStyle }}
          />
        </Grid>
      </Grid>
    </React.Fragment>
  );
}

解决方法

尝试在 textInput 文本中添加一个 paddingHorizontal。这将使宽度随着文本输入被填充而扩展。您还可以使用 maxWidth

添加最大首选

So under style try this:


<StyledTextArea
        id="outlined-multiline-static"
        label="Multiline"
        multiline
        rows={4}
        defaultValue="Default Value"
        variant="outlined"
        style={[{ ...textFieldStyle },{paddingHorizontal:20,maxWidth:100}]}
  />