Question

我正在构建一个在后台使用Material UI的设计系统。我需要自定义禁用复选框的设计。

在此代码中，为什么未应用disabled样式将颜色设置为金色？

import CheckboxMUI from '@material-ui/core/Checkbox';
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
import FormControlLabel from '@material-ui/core/FormControlLabel';

const Checkbox = ({ label, onChange, checked, disabled }) => {
  const theme = useTheme();
  const useStyles = makeStyles({
    root: {
      color: theme.palette.secondary.main,
      '&$disabled': {
        color: 'gold',
      },
    },
  });
  const classes = useStyles();

  return (
    <div>
      <FormControlLabel
        disabled={disabled}
        classes={{
          root: classes.root,
        }}
        control={
          <CheckboxMUI
            disabled={disabled}
            checked={checked}
            onChange={onChange}
            name="checkedA"
            color="primary"
            icon={
              <CheckBoxOutlineBlankIcon
                htmlColor={!disabled ? theme.palette.secondary.main : undefined}
              />
            }
          />
        }
        label={label}
      />
    </div>
  );
};

Answer 1

这对我有用：

  const useStyles = makeStyles({
    root: {
      color: theme.palette.secondary.main,
    },
    label: {
      '&.Mui-disabled': {
        color: theme.colors.disabledForeground,
      },
    },
  });

  <FormControlLabel
    disabled={disabled}
    classes={{
      root: classes.root,
      label: classes.label,
    }}

Answer 2

Material UI 的 <Checkbox> 允许您为 icon、checkedIcon 和 indeterminateIcon 提供自定义元素。在您的情况下，以下内容可以解决您的问题：

import React from 'react'
import {
  Checkbox as MUICheckbox,
  CheckboxProps,
  SvgIcon,
} from '@material-ui/core'
import { ReactComponent as CheckboxChecked } from 'assets/svg/ui/CheckboxChecked.svg'
import { ReactComponent as CheckboxUnchecked } from 'assets/svg/ui/CheckboxUnchecked.svg'
import { ReactComponent as CheckboxIndeterminate } from 'assets/svg/ui/CheckboxIndeterminate.svg'
import { ReactComponent as CheckboxDisabled } from 'assets/svg/ui/CheckboxDisabled.svg'

export default function Checkbox(props: CheckboxProps) {
  return (
    <MUICheckbox
      checkedIcon={<SvgIcon component={CheckboxChecked} />}
      indeterminateIcon={<SvgIcon component={CheckboxIndeterminate} />}
      icon={
        <SvgIcon
          component={props.disabled ? CheckboxDisabled : CheckboxUnchecked}
        />
      }
      {...props}
    />
  )
}

然后您将使用如下（这正是我解决此问题的方法）：

<Checkbox
  disabled={someCondition}
/>

材质UI复选框的自定义禁用样式？

2 个答案: