使用 MUI 自定义输入答案

【问题标题】：Customization of an Input with MUI使用 MUI 自定义输入
【发布时间】：2020-05-15 06:56:09
【问题描述】：

我想自定义一个带有填充属性的基本 TextField 的属性。

<TextField label="Reddit" variant="filled" />

然后，我想编辑：

背景颜色
标签颜色
borderBottomColor
activeBackgroundColor
activeLabelColor
activeBorderBottomColor

为此，我正在使用 theme.overrides ：

theme.overrides = {
  ...
    MuiFilledInput: {
      root: {
        backgroundColor: filledColor,
        color: baseFontColorDark,
        '& label': {
          color: '#9BA8AE',
        },
}

它适用于背景颜色，但不适用于标签。我在这个沙箱https://codesandbox.io/s/chubbybutton-tmp6y 中尝试了许多其他解决方案，但它没有工作......

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

任何从 MuiFilledInput 覆盖条目中引用标签的尝试都将失败，因为标签不是输入的后代元素——它是同级元素（当通过 @ 显示时，两者都是 FormControl 元素的后代987654327@)。相反，您可以直接在覆盖中定位MuiInputLabel。

下面是一个例子，展示了如何控制各种颜色。

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