Remove the bottom border of TextField

Question

I would like to remove the bottom border of TextField of Fluent UI. I tried the following code, but it did not work.

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

Could anyone help?

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

Answer 1

The border is defined on the fieldGroup element of the TextField. So this should work using the ITextFieldStyles interface:

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

export default function App() {
  return (
    <TextField
      styles={{
        fieldGroup: { borderBottom: "none" }
      }}
    />
  );
}

Adjusted sandbox: https://codesandbox.io/s/romantic-chandrasekhar-rp3x8f?file=/src/App.js:0-210