Question

我要自定义具有填充属性的基本TextField的属性。

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

然后，我要编辑：

backgroundColor
labelColor
borderBottomColor
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);

使用MUI自定义输入

1 个答案: