How to remove underline from input component with React Material UI?

Sometimes, we want to remove underline from input component with React Material UI.

In this article, we’ll look at how to remove underline from input component with React Material UI.

How to remove underline from input component with React Material UI?

To remove underline from input component with React Material UI, we can set the disableUnderline prop to true.

For instance, we write:

import React from "react";
import Input from "@material-ui/core/Input";

export default function App() {
  const [age, setAge] = React.useState("");

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <Input
      disableUnderline
      value={age}
      onChange={handleChange}
      placeholder="age"
    />
  );
}

to add the disableUnderline to the Input component.

As a result, we wouldn’t see the underline of the input now.

Conclusion

To remove underline from input component with React Material UI, we can set the disableUnderline prop to true.