Change style of Material-UI Textfield on Focus, React

Question

I am learning Material-UI for the first time. I want to customize the TextField of material UI. I am able to change the style of the textfield when it is not selected, I am unable to change its style when it is focused.I am using ThemeProvider to inject the style into component. I have tried this code

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

import {
  createMuiTheme,
  makeStyles,
  createStyles,
  Theme as AugmentedTheme,
  ThemeProvider
} from "@material-ui/core/styles";
import { orange, blue, green } from "@material-ui/core/colors";

const useStyles = makeStyles(theme =>
  createStyles({
    root: {
      color: green[900],
      "&.Mui-focused": {
        border:"2px solid blue",
    }
    },

  })
);

function CustomCheckbox() {
  const classes = useStyles();

  return (
    <TextField
    variant='outlined'
    classes={{
      root:classes.root,
    }}      
    />
  );
}
const theme = createMuiTheme({
});

export default function CustomStyles() {
  return (
    <ThemeProvider theme={theme}>
      <CustomCheckbox />
    </ThemeProvider>
  );
}

Question:
How to change style of TextField on focus? Help would be appreciated

Solution 1

Actually what you are probably after is setting the className of the InputProps:

<TextField variant="outlined" InputProps={{ className: classes.root }} />

If you want to also remove the border of the fieldset (or only control that border) you can set it with this:

const useStyles = makeStyles(theme =>
  createStyles({
    root: {
      color: green[900],
      "&.Mui-focused": {
        border: "2px solid red",
        '& .MuiOutlinedInput-notchedOutline': {
          border: 'none'
        }
      }
    }
  })
);

You can find a working example here: Check the following: https://codesandbox.io/s/style-text-field-htbem?file=/src/App.js

You can find more information about the different classes MUI is using with the Input component here: https://material-ui.com/api/input/#css

Solution 2

To customize MUI TextField input element's border styles:

const useStyles = makeStyles(theme =>
  createStyles({
    root: {
      color: green[900],
      "& .MuiOutlinedInput-root": {
        "& fieldset": {
          borderColor: "rgba(0, 0, 0, 0.23)"  // default
        },
        "&.Mui-focused fieldset": {
          border: "2px solid red"             // focus
        }
      }
    }
  })
);

Try it online: https://codesandbox.io/s/style-text-field-3unyl

---

The accepted answer by the way:

Comments

[Dekel]

There are multiple options there. The border that you see (the blue one) is coming from the fieldset (and not from the container/input). I'll add this to the answer.

[keikai]

It's still not correct since the two borders are not the same. You can see the size changes there. Kindly check my answer would be appreciated

[Dekel]

as mentioned - it depends on which border you want to set. It can be the fieldset (which is not the actual focused item) and the input (which is the one that you are currently focusing on). I suggest the OP will know the different between them and understand how to use each.

[Rafay Zia Mir]

@Dekel . Many thanks for your answer. That has solved my problem but i am still confused. Instead of "&.Mui-focused" i tried different things like "&$focused" but nothing worked. I am sure i am missing many things here. Where can i find more info about "Mui-focused"? Can you please guide me