材质 UI - 从其中一个文本字段中删除边框答案

【问题标题】：Material UI - remove border from one of the textfields材质 UI - 从其中一个文本字段中删除边框
【发布时间】：2021-07-02 18:56:05
【问题描述】：

我正在尝试使用左侧的图标进行输入。像这样：

我已经创建了输入。我的计划是在网格中添加输入和图标。删除输入的边框并将其添加到网格容器中。

我无法删除边框。我尝试使用扩展运算符，但出现错误。

还有其他输入使用相同的样式，它们需要边框。

如何删除此输入的边框？

const useStylesCustom = makeStyles((theme) => ({
  root: {
    border: '1px solid #e2e2e1',
    overflow: 'hidden',
    borderRadius: 2,
    backgroundColor: '#fff',
    transition: theme.transitions.create(['border-color', 'box-shadow']),
    '&:hover': {
      backgroundColor: '#fff',
    },
    '&$focused': {
      backgroundColor: '#fff',
      borderColor: '#DFDFDF',
    },
    '&$error': {
      borderColor: theme.palette.error.main,
    },
  },
  focused: {},
  error: {},
}));

<Grid container>
  <Grid xs={2} style={{ alignSelf: 'center', textAlign: 'center' }} item>
    <img src="/img/usa_flag.svg" height="25" />
  </Grid>
  <Grid item xs={10}>
    <TextField
      fullWidth
      label='Phone number'
      variant='filled'
      value={lastName}
      style={{ border: '0' }}
      InputProps={{ classes, disableUnderline: true }}
      onChange={(e) => setLastName(e.target.value)}
    />
  </Grid>
</Grid>

【问题讨论】：

标签： css reactjs material-ui border

【解决方案1】：

您可以删除变体，并且不会显示边框：

    <Grid container style={{border: "1px solid black"}}>
  <Grid xs={2} style={{ alignSelf: 'center', textAlign: 'center' }} item>
    <img src="/img/usa_flag.svg" height="25" />
  </Grid>
  <Grid item xs={10}>
    <TextField
      fullWidth
      label='Phone number'
      value={"lastName"}
      style={{ border: '0' }}
      InputProps={{ classes, disableUnderline: true }}
      
    />
  </Grid>
</Grid>

这是sandbox。

【讨论】：