javascript - 如何在 Material UI 中更改复选框图像样式。反应.js

Question

我需要将复选框中的黑色小图标更改为另一种颜色！

这是我的代码。

材质ui主题：

export const colors: IAppColors = {
   darkTheme: {
      primary: {
         placeholder: "#607589",
         bright: "#37AFE2",
         light: "#276899",
         grey: "#242F3D",
         main: "#17212B",
         dark: "#0E1621",
      },

      secondary: {
         grey: "rgba(255,255,255, .08)",
         light: "rgba(255,255,255, .1)",
         main: "#fff",
         dark: "",
      },
   },
};

Mui 主题复选框样式：

      MuiCheckbox: {
         styleOverrides: {
            root: {
               transition: "all .2s ease",

               "&.Mui-checked": {
                  ".MuiSvgIcon-root": {
                     color: colors.darkTheme.primary.bright,
                  },
               },

               ".MuiSvgIcon-root": {
                  fontSize: "2.2rem",
               },

               ".MuiTouchRipple-root": {
                  opacity: "0.3",
               },
            },
         },
      },

复选框本身

那么，我如何将这个黑色的小图标颜色更改为白色

这个小图标颜色继承自我的 mui 主题调色板主颜色。

我试图将我的主题调色板中的主颜色更改为白色，它对我有用，但是，我有一个黑色主题，所以我只需要更改这个小图标颜色，而不是应用程序的主颜色。

标签： javascripthtmlcssreactjsmaterial-ui

Answer 1

您可以在 Checkbox 组件中更改 Icon 和 checkedIcon 属性

<Checkbox
          color="primary"
          icon={props.disabled ? <CheckboxDisabledIcon /> : <CheckboxIcon />}
          checkedIcon={indeterminate ? <CheckboxIndeterminateIcon /> : <CheckboxActiveIcon />}
        />

像这样