Html notched属性在Material UI中应该做什么

我正在为一个项目使用MaterialUI，我正在浏览他们的API

但是，我不理解组件中的

notched

属性

将

notched

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

---

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

notched属性仅与

labelWidth

属性组合使用时具有可见效果。当

notched

为真时，当标签的

shorn

属性为

true

时，它会在标签放置的轮廓上留下一个间隙。通常无需明确使用

槽口

、

标签宽度

或

收缩

属性。如果使用

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>
  );
}

从“React”导入React；
从“@material ui/core/OutlinedInput”导入OutlinedInput；
从“@material ui/core/TextField”导入TextField；
导出默认函数App（）{
返回(












);
}

---

谢谢@Ryan。将槽口设置为false将删除上部轮廓顶部的额外空间。该空间由标签使用，以便在使用时与上部轮廓垂直居中shrink@eakl它不处理上部轮廓“顶部”的空间。设置<代码>缺口> /代码>为true，在大纲的中间创建一个空格，这样就不会有一行通过标签文本。我在沙盒中又添加了一个示例，演示了当

notched

应为

true

时，如果强制

notched

为

false，它会是什么样子。这就像在标签周围有一个比大纲视图更高的z索引的空白，凹口是一个绝对定位的元素，其覆盖边界的大小略大于标签，然后标签的z索引高于凹口，因此它显示在顶部。凹口本身不需要z索引值，因为它是提供轮廓的元素的后代，所以默认情况下它显示在轮廓的顶部。非常感谢@Ryan。这要清楚得多：）