Change border color on Material-UI TextField

by

Below is a v4 example (v5 example further down) of how to override the color of the outline, label, and input text on the outlined variant of TextField. This shows using three different colors: one for the default (green), one for hover (red), and a different one when the input has focus (purple).

import React from "react";
import ReactDOM from "react-dom";

import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  root: {
    "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
      borderColor: "green"
    },
    "&:hover .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
      borderColor: "red"
    },
    "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
      borderColor: "purple"
    },
    "& .MuiOutlinedInput-input": {
      color: "green"
    },
    "&:hover .MuiOutlinedInput-input": {
      color: "red"
    },
    "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-input": {
      color: "purple"
    },
    "& .MuiInputLabel-outlined": {
      color: "green"
    },
    "&:hover .MuiInputLabel-outlined": {
      color: "red"
    },
    "& .MuiInputLabel-outlined.Mui-focused": {
      color: "purple"
    }
  }
});

function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <TextField
        className={classes.root}
        defaultValue="My Default Value"
        variant="outlined"
        label="My Label"
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Edit TextField outlined (forked)

Below is a similar example using v5 of MUI. This uses styled instead of makeStyles and leverages a more type-safe manner (added in v5) for referencing the global class names (e.g. .${outlinedInputClasses.root}), but continuing to hard-code the global class names (e.g. .MuiOutlinedInput-root) still works fine as well (it’s simpler syntax when hard-coded, but less protection from typos and no autocomplete help).

import React from "react";
import ReactDOM from "react-dom";

import TextField from "@mui/material/TextField";
import { outlinedInputClasses } from "@mui/material/OutlinedInput";
import { inputLabelClasses } from "@mui/material/InputLabel";
import { styled } from "@mui/material/styles";

const StyledTextField = styled(TextField)({
  [`& .${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline}`]: {
    borderColor: "green"
  },
  [`&:hover .${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline}`]: {
    borderColor: "red"
  },
  [`& .${outlinedInputClasses.root}.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
    borderColor: "purple"
  },
  [`& .${outlinedInputClasses.input}`]: {
    color: "green"
  },
  [`&:hover .${outlinedInputClasses.input}`]: {
    color: "red"
  },
  [`& .${outlinedInputClasses.root}.${outlinedInputClasses.focused} .${outlinedInputClasses.input}`]: {
    color: "purple"
  },
  [`& .${inputLabelClasses.outlined}`]: {
    color: "green"
  },
  [`&:hover .${inputLabelClasses.outlined}`]: {
    color: "red"
  },
  [`& .${inputLabelClasses.outlined}.${inputLabelClasses.focused}`]: {
    color: "purple"
  }
});

function App() {
  return (
    <div className="App">
      <StyledTextField
        defaultValue="My Default Value"
        variant="outlined"
        label="My Label"
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Edit TextField outlined

Related answers:

More Related Contents:

  1. Material UI v4 makeStyles exported from a single file doesn’t retain the styles on refresh
  2. How to add custom MUI palette colors
  3. Global outlined override
  4. Passing props to MUI styles
  5. Internal implementation of “makeStyles” in React Material-UI?
  6. How do I custom style the underline of Material-UI without using theme?
  7. Setting text color, outline, and padding on Material-ui Autocomplete component
  8. How do I avoid ‘Function components cannot be given refs’ when using react-router-dom?
  9. Is it possible to override material-ui components default props?
  10. How to use MUI v5 makeStyles without ThemeProvider?
  11. Media queries in MUI components
  12. How do you change a style of a child when hovering over a parent using MUI styles?
  13. Difference between @mui/material/styles and @mui/styles?
  14. × TypeError: Cannot read properties of undefined (reading ‘map’)
  15. React testing library on change for Material UI Select component
  16. Property ‘value’ does not exist on type ‘never’. when use useRef hook in mui
  17. How to add custom Material UI palette colors
  18. Passing props to Material UI styles
  19. Media queries in Material UI components
  20. Material-Ui TextField not affected with the RTL direction
  21. How do you change a style of a child when hovering over a parent using Material UI styles?
  22. React Router v4 – How to get current route?
  23. How to use switch statement inside a React component?
  24. Call a React component method from outside
  25. Change outline for OutlinedInput with React material-ui
  26. How to resolve the error on ‘react-native start’
  27. Element type is invalid: expected a string (for built-in components) or a class/function
  28. Question mark before dot in javascript / react [duplicate]
  29. React this.state is undefined?
  30. Cannot find module ‘sass’

Leave a Comment