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

admin管理员组

文章数量:1392002

I'm having a bit of difficulties with the theming in Material-UI when it es 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 ponents 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 oute is that they choose the dark property, probably because it would otherwise interfere with people not being able to see the ponent 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 ponent.

I'm having a bit of difficulties with the theming in Material-UI when it es 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 ponents 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 oute is that they choose the dark property, probably because it would otherwise interfere with people not being able to see the ponent 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 ponent.

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

• javascript
• css
• reactjs
• material-ui

Share Improve this question Follow edited Sep 3, 2019 at 21:10 Ezrab_ asked Sep 3, 2019 at 20:32 Ezrab_Ezrab_ 1,00377 gold badges2222 silver badges4949 bronze badges 14

• See my answer here for how to change the underline color in TextField. – Ryan Cogswell Commented Sep 3, 2019 at 20:43
• @RyanCogswell Ok but how about the floating text? – Ezrab_ Commented Sep 3, 2019 at 20:45
• Can you setup a code sandbox where your problem is clearer? – JCQuintas Commented Sep 3, 2019 at 20:55
• See my answer here for an example of customizing the label. Another related answer on styling labels is here. – Ryan Cogswell Commented Sep 3, 2019 at 20:57
• 1 Here is a modified version of your sandbox. – Ryan Cogswell Commented Sep 3, 2019 at 21:25

 |  Show 9 more ments

1 Answer 1

Sorted by: Reset to default 5

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

Related answers:

• How do I custom style the underline of Material-UI without using theme?
• How can I change the label size of a material ui TextField?
• Change InputLabel color of a Select ponent when clicked/focused
• Change outline for OutlinedInput with React material-ui

本文标签： javascriptHow to properly set colors on certain elements in MaterialuiStack Overflow