IT技术 - 如何在 Material-ui 中正确设置某些元素的颜色？ - 吾爱随笔录

如何在 Material-ui 中正确设置某些元素的颜色？

IT技术 javascript css reactjs material-ui

2021-05-16 22:10:35

当涉及到着色元素时，我在 Material-UI 中的主题化方面遇到了一些困难。某些元素会自动选择“theme.palette.main.dark”。我想知道如何强迫他们不要这样做。

例如 TextField 和 SpeedDial 组件会自动从主题中选择 dark 属性。我试图只删除 dark 属性，但 TextField 是黑色的，并且 TextField 内的文本不可读。

我的主题文件配置如下：

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;

我希望 TextField 和 SpeedDial 选择原色，但实际结果是他们选择了暗属性，可能是因为否则会干扰人们无法正确看到组件，但我想自定义选择颜色。我一直无法找到有关如何更改 TextField 组件中下划线和浮动的颜色的解释。

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

1个回答

下面是一个示例，在 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);

这是相同的外观，但通过主题控制：

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