Material UI OutlinedInput 标签不可见

Question

我们正在使用 Material UI 中的

OutlinedInput

，但文本标签不会渲染。如何解决这个问题？

import { Grid, OutlinedInput } from '@material-ui/core';

<Grid container>
  <Grid item xs={12}>
    <OutlinedInput
      label="invisible label"
      placeholder="HELLO, STACKOVERFLOW!"
      value={value}
      onChange={(e) => handleValueChange(e.target.value)}
      fullWidth
    />
  </Grid>
</Grid>

渲染的是一个空白区域（左上角），而不是预期的“不可见标签”文本：

Answer 1

就像 @Daniel L 提到的，你必须在

InputLabel

组件中使用

FormControl

组件，但除了他的答案之外 - 我还必须在我的

label

组件上添加

OutlinedInput

属性，以便轮廓输入不会与我的标签重叠。

不带label属性的代码：

<FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
    <InputLabel htmlFor='display-name'>Display Name</InputLabel>
        <OutlinedInput
            id="display-name"
            value={displayName}
            onChange={(e) => handleInputChange(e)}
            aria-describedby="base-name-helper-text"
            inputProps={{
             'aria-label': 'weight',
            }}
      />
   </FormControl>

带有标签属性的代码：

<FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
    <InputLabel htmlFor='display-name'>Display Name</InputLabel>
        <OutlinedInput
            id="display-name"
            value={displayName}
            label='Display Name'
            onChange={(e) => handleInputChange(e)}
            aria-describedby="base-name-helper-text"
            inputProps={{
             'aria-label': 'weight',
            }}
      />
   </FormControl>

Answer 2

对此问题的快速回答基本上是将组件包装在

FormControl

下，并在

InputLabel

组件顶部添加

OutlinedInput

。

根据您的代码，它应该如下所示：

<Grid container>
    <Grid item xs={12}>
        <FormControl>
            <InputLabel htmlFor="outlined-adornment">Some text</InputLabel>
            <OutlinedInput
                id="outlined-adornment"
                placeholder="HELLO, STACKOVERFLOW!"
                value={value}
                onChange={(e) => handleValueChange(e.target.value)}
                fullWidth
            />
        </FormControl>
    </Grid>
</Grid>

Answer 3

我认为这个组件不适合单独使用。在 MUI 文档中，它主要用作其他组件的增强，例如

TextField

<TextField id="outlined-basic" label="Outlined" variant="outlined" />

如果您检查开发工具中的样式，看起来 CSS 属性

visibility: hidden

导致了此问题。事实上，如果您删除该样式，您将看到该标签有效。

---

但是，如果您已经使用此组件构建了大部分应用程序并且需要显示该标签，只需使用 MUI 的样式解决方案（例如

makeStyles

）覆盖它即可。另外，使用

notched

prop 为其分配空间

const useStyles = makeStyles({
  customInputLabel: {
    "& legend": {
      visibility: "visible"
    }
  }
});

export default function App() {
  const classes = useStyles();

  return (
    <div className="App">
      <Grid container>
        <Grid item xs={12}>
          <OutlinedInput
            classes={{ notchedOutline: classes.customInputLabel }}
            label="visible label"
            placeholder="HELLO, STACKOVERFLOW!"
            fullWidth
            notched
          />
        </Grid>
      </Grid>
    </div>
  );
}

Answer 4

我遇到了同样的问题，我将 OutlinedInput 包装到 FormControl 元素中，并附加 InputLabe 组件作为标签，这解决了我的问题。

Answer 5

要点： 方向：“ltr”确保标签文本对于从左到右的语言正确对齐。 &.MuiFormLabel-root:not(.MuiFormLabel-filled):not(.Mui-focused) 等规则可让您定位不同状态下的标签。 确保应用 ThemeProvider 来包装您的应用程序或特定组件以应用这些样式。

const const theme  = createTheme({ 
 MuiInputLabel:{
 defaultProps:{},
 styleOverrides:{
  root:{
  direction:"ltr",      
  width:"100%",
  textAlign:"end",
  fontSize:20,
  "&.MuiFormLabel-root:not(.MuiFormLabel-filled):not(.Muifocused)":{color:'pink'},
  "&.Mui-focused":{left:30,top:-10},
  "&.MuiFormLabel-filled:not(.Mui-focused)":{left:30, top:-6}
},
},
},