Material UI 自定义颜色

Question

大家早上好

我正在尝试使用 ReactJS 和 Material UI 开发一个网站。 我从这个模板开始。

我想在聚焦时修改 TextField 的颜色：现在它是蓝色的，假设我希望它是绿色的。

这是原始文件（在我上面链接的存储库中，它位于 src/components/MKInput/MKInputRoot 下）：

import TextField from "@mui/material/TextField";
import { styled } from "@mui/material/styles";

export default styled(TextField)(({ theme, ownerState }) => {
  const { palette, functions } = theme;
  const { error, success, disabled } = ownerState;

  const { grey, transparent, error: colorError, success: colorSuccess } = palette;
  const { pxToRem } = functions;

  // styles for the input with error={true}
  const errorStyles = () => ({
    backgroundImage:
      "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23F44335' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23F44335' stroke='none'/%3E%3C/svg%3E\")",
    backgroundRepeat: "no-repeat",
    backgroundPosition: `right ${pxToRem(12)} center`,
    backgroundSize: `${pxToRem(16)} ${pxToRem(16)}`,

    "& .Mui-focused": {
      "& .MuiOutlinedInput-notchedOutline, &:after": {
        borderColor: colorError.main,
      },
    },

    "& .MuiInputLabel-root.Mui-focused": {
      color: colorError.main,
    },
  });

  // styles for the input with success={true}
  const successStyles = () => ({
    backgroundImage:
      "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath fill='%234CAF50' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E\")",
    backgroundRepeat: "no-repeat",
    backgroundPosition: `right ${pxToRem(12)} center`,
    backgroundSize: `${pxToRem(16)} ${pxToRem(16)}`,

    "& .Mui-focused": {
      "& .MuiOutlinedInput-notchedOutline, &:after": {
        borderColor: colorSuccess.main,
      },
    },

    "& .MuiInputLabel-root.Mui-focused": {
      color: colorSuccess.main,
    },
  });

  return {
    backgroundColor: disabled ? `${grey[200]} !important` : transparent.main,
    pointerEvents: disabled ? "none" : "auto",
    ...(error && errorStyles()),
    ...(success && successStyles()),
  };
});

我稍微简化了一下：

import TextField from "@mui/material/TextField";
import { styled } from "@mui/material/styles";

export default styled(TextField)(({ theme, ownerState }) => {
  const { palette } = theme;
  const { disabled } = ownerState;

  const { grey, transparent } = palette;

  const myStyles = () => ({
    "& .Mui-focused": {
      "& .MuiOutlinedInput-notchedOutline, &:after": {
        borderColor: "#00ff00",
      },
    },

    "& .MuiInputLabel-root.Mui-focused": {
      color: "#00ff00",
    },
  });

  return {
    backgroundColor: disabled ? `${grey[200]} !important` : transparent.main,
    pointerEvents: disabled ? "none" : "auto",
    ...myStyles(),
  };
});

我删除了

error &&

之前的

...myStyle()

，因为我希望这种样式始终被应用，而不仅仅是在错误时应用。

现在假设我想从绿色变为红色，我将字符串“#00ff00”替换为“#ff0000”，单击网页上的文本输入，焦点时边框变为红色。如果我刷新页面并再次执行此操作，则焦点边框为蓝色。每次我尝试更改颜色时都会发生这种情况：我将颜色字符串替换为所需的颜色，并应用正确的颜色，直到刷新页面；刷新后，焦点边框颜色始终变回蓝色。

关于为什么会发生这种情况有什么建议吗？

编辑： 看起来颜色是从主题的 primary 属性中获取的。我尝试了不同的方法来覆盖此行为，例如在创建主题时使用 styleOverrides：

export default createTheme({
  components: {
    MuiInput: {
      styleOverrides: {
        root: {
          "& .Mui-focused": {
            borderColor: (props) => {
              const color = props.ownerState.color;
              return props.theme.palette.textInputs[color].focused;
          },
        },
      },
    },
  },
  MuiOutlinedInput: styleOverrides: {
    root: {
      "& .Mui-focused": {
        borderColor: (props) => {
          const color = props.ownerState.color;
          return props.theme.palette.textInputs[color].focused;
        },
      },
    },
  },
  MuiTextInput: {
    styleOverrides: {
      root: {
        "& .Mui-focused": {
          borderColor: (props) => {
            const color = props.ownerState.color;
              return props.theme.palette.textInputs[color].focused;
          },
        },
      },
    },
  ...

我也尝试在所有这些覆盖中设置

borderColor: "transparent"

，但没有任何反应。另外，如果我从调色板中删除 primary 属性，焦点颜色将变为蓝色。

我缺少一些覆盖吗？

如果您需要更多详细信息，请告诉我。

提前致谢

Answer 1

我能够复制刷新项目时样式消失的问题。

我能够通过确保即使在像这样刷新之后仍然应用样式覆盖来修复它：

代码示例

export default function FormPropsTextFields() {
  const textFieldSx = {
    '.MuiInputLabel-outlined.Mui-focused': {
      color: 'green',
    },
    '& .MuiOutlinedInput-root': {
      '&.Mui-focused fieldset': {
        borderColor: 'green',
      },
    },
  };

  return (
    <Box component="form">
      <TextField label="Name" defaultValue="John Doe" sx={textFieldSx} />
    </Box>
  );
}

演示

https://stackblitz.com/edit/react-sn9tjm?file=Demo.tsx

---

您可能需要添加错误样式以及该代码。让我知道这是否有效。