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

Question

我正在一个项目中使用 Material-UI，并且正在浏览他们的 API。

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

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

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

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

Answer 1

属性notched只有与属性结合才具有可见的效果labelWidth。当notched为 true 时，当标签的shrink属性为时，它会在放置标签的轮廓中留下间隙true。通常不需要显式使用notched、labelWidth或shrink属性。如果您使用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>
  );
}