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...

Ryan Cogswell · Accepted Answer · 2020-01-29T19:37:30.757

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);

Customization of an Input with MUI

1 Answers1