如何移除Fluent UI中TextField组件的底部边框？

你原来的写法不生效，是因为Fluent UI的TextField组件的style属性只能设置根容器的样式，没法通过嵌套对象直接控制内部的input/textarea元素。下面给你两种可行的方案：

方案一：使用Fluent UI官方的styles属性（推荐） #

Fluent UI组件提供了styles属性（注意是复数形式），可以针对组件内部的各个插槽（slot）自定义样式，输入框对应的插槽是inputField：

import "./styles.css";
import { TextField } from "@fluentui/react";

export default function App() {
  return (
    <TextField
      styles={{
        inputField: {
          border: "none",
          borderBottom: "none",
          // 可选：移除聚焦时的边框高亮
          ":focus": {
            outline: "none"
          }
        }
      }}
    />
  );
}

方案二：自定义CSS类 #

如果习惯用外部CSS，可以给TextField添加自定义类名，然后通过CSS选择器覆盖样式（需要注意优先级）：

第一步：在styles.css中添加样式 #

.custom-textfield .ms-TextField-field {
  border: none !important;
  border-bottom: none !important;
}
.custom-textfield .ms-TextField-field:focus {
  outline: none !important;
}

第二步：在组件中使用自定义类名 #

import "./styles.css";
import { TextField } from "@fluentui/react";

export default function App() {
  return (
    <TextField className="custom-textfield" />
  );
}

两种方案都能实现移除底部边框的效果，方案一更贴合Fluent UI的设计规范，建议优先使用。

内容的提问来源于stack exchange，提问作者SoftTimur