Sometimes, we want to change the outline for OutlinedInput with React Material UI.

In this article, we’ll look at how to change the outline for OutlinedInput with React Material UI.

How to change the outline for OutlinedInput with React Material UI?

To change the outline for OutlinedInput with React Material UI, we can use the makeStyles function.

For instance, we write:

import React from "react";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(() => ({
  root: {
    "& $notchedOutline": {
      borderWidth: 0
    },
    "&:hover $notchedOutline": {
      borderWidth: 0
    },
    "&$focused $notchedOutline": {
      borderWidth: 0
    }
  },
  focused: {},
  notchedOutline: {}
}));

export default function App() {
  const classes = useStyles();

  return (
    <div>
      <OutlinedInput
        disableUnderline={true}
        notched={true}
        classes={classes}
        value={1}
      />
    </div>
  );
}

We call makeStyles with a callback to return the border styles.

We set all the borders to have width 0.

Then we call useStyles in App to return the classes.

Next, we set disableUnderline to true to remove the underline.

And set the classes prop to classes to remove the remaining borders.

Conclusion

To change the outline for OutlinedInput with React Material UI, we can use the makeStyles function.