Question

我想在Material UI TextField组件上同时使用className和fullWidth属性，但这似乎不起作用。

仅使用className可以正常工作，而fullWidth也可以正常工作，但是当我尝试同时使用这两种方法时，它仅侦听className。

//Only className, works fine
<TextField
    id="date"
    label="Only className"
    type="date"
    defaultValue="2017-05-23"
    className={classes.textField}
    InputLabelProps={{
        shrink: true
    }}
/>
//Only fullWidth, works fine
<TextField
    id="date"
    label="Only fullWidth"
    type="date"
    defaultValue="2017-05-24"
    fullWidth={true}
    InputLabelProps={{
        shrink: true
    }}
/>
//Both, not working (only className is applied)
<TextField
    id="date"
    label="Both"
    type="date"
    defaultValue="2017-05-25"
    className={classes.textField}
    fullWidth={true}
    InputLabelProps={{
        shrink: true
    }}
/>

沙盒示例： https://codesandbox.io/s/material-demo-0qqqd

Answer 1

以您的TextField风格，您通过设置自己的200px宽度来覆盖fullWidth道具。

textField: {
  marginLeft: theme.spacing(1),
  marginRight: theme.spacing(1),
  width: 200
}

将其更改为：

textField: {
  marginLeft: theme.spacing(1),
  marginRight: theme.spacing(1),
  width: '100%'
}

或

只需从textField样式中删除宽度

textField: {
  marginLeft: theme.spacing(1),
  marginRight: theme.spacing(1),
}

然后在您的TextField中使用fullWidth=true

  <TextField
    id="date"
    label="Birthday"
    type="date"
    defaultValue="2017-05-25"
    className={classes.textField}
    fullWidth={true}
    InputLabelProps={{
      shrink: true
    }}
  />

MUI组件上的fullWidth和className

1 个答案: