Categories
React Answers

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

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *