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

问题

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

回答1:

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