reactjs - 使用 MUI 自定义输入

Question

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

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

然后，我想编辑:

背景色

labelColor

边框底部颜色

activeBackgroundColor

activeLabelColor

activeBorderBottomColor

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

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

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

Answer 1

任何从 MuiFilledInput 中引用标签的尝试覆盖条目将失败，因为标签不是输入的后代元素——它是同级元素(当通过 FormControl 显示时，两者都是 TextField 元素的后代)。相反，您可以定位 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);

相关回答:

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

How do I custom style the underline of Material-UI without using theme?