删除TextField的下边框

Question

我想删除Fluent UI的TextField的下边框。我尝试了下面的代码，但它不起作用。

import "./styles.css";
import { TextField } from "@fluentui/react";
export default function App() {
return (
<TextField
style={{
textarea: { border: "none", borderBottom: "none" },
input: { border: "none", borderBottom: "none" }
}}
/>
);
}

有人能帮忙吗?

PS: CodeSandbox: https://codesandbox.io/s/epic-ramanujan-0jcsw1?file=/src/App.js:0-280

Answer 1

边框定义在TextField的fieldGroup元素上。因此，使用ITextFieldStyles接口应该可以工作:

import "./styles.css";
import { TextField } from "@fluentui/react";
export default function App() {
return (
<TextField
styles={{
fieldGroup: { borderBottom: "none" }
}}
/>
);
}

调整沙盒:https://codesandbox.io/s/romantic-chandrasekhar-rp3x8f?file=/src/App.js:0-210

Answer 2

在你的。css

上试试下面的代码

.no-border {
border-bottom: none;
outline: none;
}

和你的代码

import "./styles.css";
import { TextField } from "@fluentui/react";
export default function App() {
return <TextField className="no-border" />;
}