html - Material-UI 中的 notched 属性应该做什么

Question

我正在为一个元素使用 Material-UI，我正在浏览他们的 API。

但是，我不明白 OutlineInput 中的 notched 属性组件

<FormControl variant='outlined'>
  <OutlinedInput notched={false} />
</FormControl>

将 notched 属性从 false 切换为 true 不会在视觉上改变任何内容。

此外，由于我的母语不是英语，所以我完全不明白它应该做什么。

Answer 1

notched 属性仅在与 labelWidth 属性结合使用时具有可见效果。当 notched 为真时，当标签的 shr​​ink 属性为 true 时，它会在放置标签的轮廓中留下间隙。通常不需要显式使用 notched、labelWidth 或 shr​​ink 属性。如果您使用 TextField(而不是较低级别的 OutlinedInput)，所有这些细节都会自动处理。

这里有一个例子来证明这一点:

import React from "react";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import TextField from "@material-ui/core/TextField";

export default function App() {
  return (
    <div>
      <OutlinedInput notched={false} labelWidth={100} />
      <br />
      <br />
      <OutlinedInput notched={true} labelWidth={100} />
      <br />
      <br />
      <TextField variant="outlined" label="The Label" value="The Value" />
      <br />
      <br />
      <TextField
        variant="outlined"
        InputProps={{ notched: false }}
        label="The Label"
        value="The Value"
      />
    </div>
  );
}