如何在Material-UI中的轮廓样式TextField组件中覆写边框颜色-编程知识-白鹭情

任务是使用 Material UI 概述的输入栏位（TextField来自的组件"@material-ui/core": "^4.12.2",）并使用自定义蓝色设定样式。

这是我设法实作的目标：如何在 Material-UI 中的轮廓样式 TextField 组件中覆写边框颜色

InputLabel 的当前主题覆写：

import { createTheme } from "@material-ui/core/styles";

export const muiTheme = createTheme({
  overrides: {
    MuiInputLabel: {
      outlined: {
        "&$focused": {
          color: "#3f3fa0",
        },
      },
    },
  },
},

上述通用主题覆写有助于将标签（“电子邮件地址”）颜色更改为蓝色。蓝色border-color是通过TextField使用以下 CSS包装在样式组件中来实作的：

import styled from "styled-components";
import { TextField } from "@material-ui/core";

export const CustomTextField = styled(TextField)`
  .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-color: #3f3fa0;
  }
`;

我像这样渲染上面的组件（在内部ThemeProvider）：

<CustomTextField
  variant="outlined"
  label={label}
/>

这个 hacky 解决方案有效，如我上面提供的影像所示，但是，有时 Mui 代码决定将如何在 Material-UI 中的轮廓样式 TextField 组件中覆写边框颜色

我试图将我能想到的几乎任何组合添加到 Mui 覆写物件以覆写该border-color属性，但无法弄清楚。你能帮我吗？

uj5u.com热心网友回复：

这是在 OutlinedInput (material-ui v4) 上覆写边框颜色的方法。

我在这里做了一个代码沙盒

const defaultColor = "#ff0000";
const hoverColor = "#0000ff";
const focusColor = "#00ff00";

const theme = createTheme({
  overrides: {
    MuiOutlinedInput: {
      root: {
        // Hover state
        "&:hover $notchedOutline": {
          borderColor: hoverColor
        },
        // Focused state
        "&$focused $notchedOutline": {
          borderColor: focusColor
        }
      },
      // Default State
      notchedOutline: {
        borderColor: defaultColor
      }
    }
  }
});