Customization of an Input with MUI

Question

I want to customize the properties of a basic TextField with filled attribute.

<TextField label="Reddit" variant="filled" />

Then, I want to edit the:

• backgroundColor
• labelColor
• borderBottomColor
• activeBackgroundColor
• activeLabelColor
• activeBorderBottomColor

For that, I'm using theme.overrides :

theme.overrides = {
  ...
    MuiFilledInput: {
      root: {
        backgroundColor: filledColor,
        color: baseFontColorDark,
        '& label': {
          color: '#9BA8AE',
        },
}

It works for the backgroundColor but not for the label. I tried many other solution in this sandbox https://codesandbox.io/s/chubbybutton-tmp6y but It didn't work...

Answer 1

Any attempt to reference the label from within the MuiFilledInput override entry will fail because the label is not a descendant element of the input -- it is a sibling (both are descendants of the FormControl element when displayed via TextField). Instead you can target MuiInputLabel directly in the overrides.

Below is an example showing how to control the various colors.

import React from "react";
import ReactDOM from "react-dom";
import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const theme = createMuiTheme({
  overrides: {
    MuiFilledInput: {
      root: {
        backgroundColor: "#ff0",
        "&:hover": {
          backgroundColor: "#ff8"
        },
        "&$focused": {
          backgroundColor: "#dfb"
        }
      },
      underline: {
        "&:before": {
          borderBottomColor: "red"
        },
        "&:hover:not(.Mui-focused):before": {
          borderBottomColor: "green"
        },
        "&:after": {
          // focused
          borderBottomColor: "purple"
        }
      }
    },
    MuiInputLabel: {
      filled: {
        color: "purple",
        "&$focused": {
          color: "green"
        },
        ".MuiFormControl-root:hover &:not($focused)": {
          color: "red"
        }
      }
    }
  }
});

function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <TextField label="My Label" defaultValue="My Value" variant="filled" />
    </MuiThemeProvider>
  );
}

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

Related answers:

• How to properly set colors on certain elements in Material-ui?
• How do I custom style the underline of Material-UI without using theme?