How to properly set colors on certain elements in Material-ui?

Question

I'm having a bit of difficulties with the theming in Material-UI when it comes to coloring elements. Some elements automatically choose 'theme.palette.main.dark'. I want to know how to force them not to.

For instance the TextField and SpeedDial components automatically choose the dark property from the theme. I've tried to just remove the dark property, but than the TextField is black and the text inside the TextField is unreadable.

My theme file is configured as following:

import {createMuiTheme} from "@material-ui/core";
import {green, indigo, red} from "@material-ui/core/colors";

const theme = createMuiTheme({
  palette: {
    primary: {
      main: indigo.A200,
      dark: green.A100
    },
    white: {
      text: '#fff',
    },
    secondary: {
      main: red.A100,
      dark: green.A100,
    }
  }
});

export default theme;

I expect the TextField and SpeedDial to choose the primary color but the actual outcome is that they choose the dark property, probably because it would otherwise interfere with people not being able to see the component properly, but I want to custom choose the colors. I haven't been able to find an explanation on how to change the color for the underline and the float in the TextField component.

https://codesandbox.io/s/material-demo-o52c8

See my answer [here](https://stackoverflow.com/questions/56023814/how-do-i-custom-style-the-underline-of-material-ui-without-using-theme/56026253#56026253) for how to change the underline color in TextField. — Ryan Cogswell, Sep 03 '19 at 20:43
See my answer [here](https://stackoverflow.com/questions/54525334/how-can-i-change-the-label-size-of-a-material-ui-textfield/54525703#54525703) for an example of customizing the label. Another related answer on styling labels is [here](https://stackoverflow.com/questions/56639689/change-inputlabel-color-of-a-select-component-when-clicked-focused/56639982#56639982). — Ryan Cogswell, Sep 03 '19 at 20:57
@RyanCogswell I think this is old because, FormLabelClasses doesn't exist. — Ezrab_, Sep 03 '19 at 21:01
@JCQuintas I would, but I really don't know how to set up babel. And so es6 doesn't work. — Ezrab_, Sep 03 '19 at 21:02
You can probably start from here: https://codesandbox.io/s/pf22z — JCQuintas, Sep 03 '19 at 21:05
@JCQuintas thanks: https://codesandbox.io/s/material-demo-o52c8 — Ezrab_, Sep 03 '19 at 21:09
@RyanCogswell So your example with the ```classes: { root: classes.labelRoot, focused: classes.labelFocused },``` works, but I still can't get the underline to get a color in a TextField. — Ezrab_, Sep 03 '19 at 21:23
[Here](https://codesandbox.io/s/material-demo-d79l4) is a modified version of your sandbox. — Ryan Cogswell, Sep 03 '19 at 21:25
@RyanCogswell Awesome, thanks! So would it also be possible to actually change the text color when people write stuff inside the TextField? — Ezrab_, Sep 03 '19 at 21:27
@RyanCogswell Never mind just added className to InputProps. — Ezrab_, Sep 03 '19 at 21:36
@RyanCogswell Do you know how to add ::selection in the textfield, so that if you highlight your input you'll see the selection in lets say red? I tried just adding a classname to the textfield component and add ```selection: { "&::selection": { color: 'red', } }``` — Ezrab_, Sep 03 '19 at 21:59

Ryan Cogswell · Accepted Answer · 2020-10-20T14:07:19.770

Below is an example with many obnoxious colors on the different aspects of the TextField.

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: {
    color: "white",
    backgroundColor: "fuchsia",
    "&.Mui-focused": {
      color: "orange",
      backgroundColor: "pink"
    },
    "&:before": {
      borderBottomColor: "blue"
    },
    "&:hover:not(.Mui-focused):before": {
      borderBottomColor: "green"
    },
    "&:after": {
      // focused
      borderBottomColor: "purple"
    }
  },
  input: {
    "&::selection": {
      backgroundColor: "lightgreen",
      color: "black"
    }
  }
});
const useLabelStyles = makeStyles({
  root: {
    color: "brown",
    "&.Mui-focused": {
      color: "aqua"
    }
  }
});
function App() {
  const classes = useStyles();
  const labelClasses = useLabelStyles();
  return (
    <div className="App">
      <TextField
        InputProps={{ classes: classes }}
        InputLabelProps={{ classes: labelClasses }}
        label="label"
        defaultValue="text"
      />
    </div>
  );
}

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

Here's the same look, but controlled via the theme:

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

import TextField from "@material-ui/core/TextField";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";

const theme = createMuiTheme({
  overrides: {
    MuiInput: {
      root: {
        color: "white",
        backgroundColor: "fuchsia",
        "&.Mui-focused": {
          color: "orange",
          backgroundColor: "pink"
        },
        "&:before": {
          borderBottomColor: "blue"
        },
        "&:hover:not(.Mui-focused):before": {
          borderBottomColor: "green"
        },
        "&:after": {
          // focused
          borderBottomColor: "purple"
        }
      },
      input: {
        "&::selection": {
          backgroundColor: "lightgreen",
          color: "black"
        }
      }
    },
    MuiInputLabel: {
      root: {
        color: "brown",
        "&.Mui-focused": {
          color: "aqua"
        }
      }
    }
  }
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <div className="App">
        <TextField label="label" defaultValue="text" />
      </div>
    </ThemeProvider>
  );
}

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

How to properly set colors on certain elements in Material-ui?

1 Answers1

Linked