Material UI - 带有类似实际按钮的变体属性的自定义 IconButton

Question

这是我的第一篇文章，如果我忘记了什么，请谅解...

在我的工作中，我必须使用Material UI，并且我需要一个带有一些内含样式的IconButton，就像真正的Button一样！

我通过完全复制Mui组件的代码来实现：https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/IconButton/IconButton.js

我所做的就是添加了基于Button组件的代码和样式，但我认为这不是正确的方法…我想将IconButton作为别名导入，并添加变量属性以及一些新样式，但我不知道该如何实现。

以下是我的组件：

import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { chainPropTypes } from '@material-ui/utils';
import withStyles from '@material-ui/core/styles/withStyles';
import ButtonBase from '@material-ui/core/ButtonBase';
import { fade } from '@material-ui/core/styles/colorManipulator';
import capitalize from '@material-ui/core/utils/capitalize';

// TODO Better use of MUI possible ? -> Not copying the component but overriding it ?
// TODO Bug with Dark Mode

export const styles = (theme) => ({
  /* Styles applied to the root element. */
  root: {
    textAlign: 'center',
    flex: '0 0 auto',
    fontSize: theme.typography.pxToRem(24),
    padding: 12,
    margin: theme.spacing(0, 0.5),
    borderRadius: '50%',
    overflow: 'visible', // Explicitly set the default value to solve a bug on IE 11.
    color: theme.palette.action.active,
    transition: theme.transitions.create('background-color', {
      duration: theme.transitions.duration.shortest,
    }),
    '&:hover': {
      backgroundColor: fade(theme.palette.action.active, theme.palette.action.hoverOpacity),
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
    },
    '&$disabled': {
      backgroundColor: 'transparent',
      color: theme.palette.action.disabled,
    },
  },
  /* Styles applied to the root element if `variant="text"`. */
  text: {
    padding: '6px 8px',
  },
  /* Styles applied to the root element if `variant="text"` and `color="primary"`. */
  textPrimary: {
    color: theme.palette.primary.main,
    '&:hover': {
      backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity),
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
    },
  },
  /* Styles applied to the root element if `variant="text"` and `color="secondary"`. */
  textSecondary: {
    color: theme.palette.secondary.main,
    '&:hover': {
      backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
    },
  },
  /* Styles applied to the root element if `variant="text"` and `color="on"`. */
  textOn: {
    color: theme.palette.success.main,
    '&:hover': {
      backgroundColor: theme.palette.success.main,
      color: theme.palette.getContrastText(theme.palette.success.main),
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
    },
  },
  /* Styles applied to the root element if `variant="text"` and `color="off"`. */
  textOff: {
    color: theme.palette.warning.main,
    '&:hover': {
      backgroundColor: fade(theme.palette.warning.dark, theme.palette.action.activatedOpacity),
      color: theme.palette.getContrastText(theme.palette.warning.main),
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
    },
  },
  /* Styles applied to the root element if `variant="text"` and `color="error"`. */
  textError: {
    color: theme.palette.error.main,
    '&:hover': {
      backgroundColor: fade(theme.palette.error.main, theme.palette.action.hoverOpacity),
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
    },
  },
  /* Styles applied to the root element if `variant="text"` and `color="white"`. */
  textWhite: {
    color: theme.palette.background.paper,
    '&:hover': {
      backgroundColor: fade(theme.palette.background.paper, theme.palette.action.hoverOpacity),
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
    },
    '&$disabled': {
      color: fade(theme.palette.primary.contrastText, theme.palette.action.disabledOpacity),
      boxShadow: theme.shadows[0],
      backgroundColor: theme.palette.action.disabledBackground,
    },
  },
  /* Styles applied to the root element if `variant="outlined"`. */
  outlined: {
    padding: '5px 15px',
    border: `1px solid ${
      theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
    }`,
    '&$disabled': {
      border: `1px solid ${theme.palette.action.disabledBackground}`,
    },
  },
  /* Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
  outlinedPrimary: {
    color: theme.palette.primary.main,
    border: `1px solid ${fade(theme.palette.primary.main, 0.5)}`,
    '&:hover': {
      border: `1px solid ${theme.palette.primary.main}`,
      backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity),
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
    },
  },
  /* Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */
  outlinedSecondary: {
    color: theme.palette.secondary.main,
    border: `1px solid ${fade(theme.palette.secondary.main, 0.5)}`,
    '&:hover': {
      border: `1px solid ${theme.palette.secondary.main}`,
      backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
    },
    '&$disabled': {
      border: `1px solid ${theme.palette.action.disabled}`,
    },
  },
  /* Styles applied to the root element if `variant="outlined"` and `color="text"`. */
  outlinedText: {
    color: theme.palette.getContrastText(theme.palette.background.relevant),
    border: `1px solid ${fade(theme.palette.getContrastText(theme.palette.background.relevant), 0.5)}`,
    '&:hover': {
      border: `1px solid ${theme.palette.getContrastText(theme.palette.background.relevant)}`,
      backgroundColor: fade(theme.palette.getContrastText(theme.palette.background.relevant), theme.palette.action.hoverOpacity),
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
      label: {
        color: theme.palette.text.primary,
      },
    },
    '&$disabled': {
      border: `1px solid ${theme.palette.action.disabled}`,
    },
  },
  /* Styles applied to the root element if `variant="outlined"` and `color="white"`. */
  outlinedWhite: {
    color: theme.palette.background.paper,
    border: `1px solid ${theme.palette.background.paper}`,
    boxSizing: "border-box",
    '&:hover': {
      border: `1px solid ${theme.palette.background.paper}`,
      backgroundColor: fade(theme.palette.background.paper, theme.palette.action.hoverOpacity),
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
      label: {
        color: theme.palette.background.paper,
      },
    },
    '&$disabled': {
      border: `1px solid ${fade(theme.palette.background.paper, theme.palette.action.disabledOpacity)}`,
      color: fade(theme.palette.background.paper, theme.palette.action.disabledOpacity),
    },
  },
  /* Styles applied to the root element if `variant="contained"`. */
  contained: {
    color: theme.palette.getContrastText(theme.palette.grey[300]),
    backgroundColor: theme.palette.grey[300],
    boxShadow: theme.shadows[2],
    '&:hover': {
      backgroundColor: theme.palette.grey.A100,
      boxShadow: theme.shadows[4],
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        boxShadow: theme.shadows[2],
        backgroundColor: theme.palette.grey[300],
      },
      '&$disabled': {
        backgroundColor: theme.palette.action.disabledBackground,
      },
    },
    '&$focusVisible': {
      boxShadow: theme.shadows[6],
    },
    '&:active': {
      boxShadow: theme.shadows[8],
    },
    '&$disabled': {
      color: theme.palette.action.disabled,
      boxShadow: theme.shadows[0],
      backgroundColor: theme.palette.action.disabledBackground,
    },
  },
  /* Styles applied to the root element if `variant="contained"` and `color="primary"`. */
  containedPrimary: {
    color: theme.palette.primary.contrastText,
    backgroundColor: theme.palette.primary.main,
    '&:hover': {
      backgroundColor: theme.palette.primary.dark,
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: theme.palette.primary.main,
      },
    },
  },
  /* Styles applied to the root element if `variant="contained"` and `color="secondary"`. */
  containedSecondary: {
    color: theme.palette.secondary.contrastText,
    backgroundColor: theme.palette.secondary.main,
    '&:hover': {
      backgroundColor: theme.palette.secondary.dark,
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: theme.palette.secondary.main,
      },
    },
  },
  /* Styles applied to the root element if `variant="contained"` and `color="secondary"`. */
  containedText: {
    color: theme.palette.primary.contrastText,
    backgroundColor: theme.palette.text.primary,
    '&:hover': {
      backgroundColor: theme.palette.text.secondary,
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: theme.palette.text.primary,
      },
    },
  },
  /* Styles applied to the root element if `variant="contained"` and `color="secondary"`. */
  containedOn: {
    color: theme.palette.success.contrastText,
    backgroundColor: theme.palette.success.main,
    '&:hover': {
      backgroundColor: theme.palette.success.dark,
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: theme.palette.success.main,
      },
    },
  },
  /* Styles applied to the root element if `variant="contained"` and `color="secondary"`. */
  containedOff: {
    color: theme.palette.warning.contrastText,
    backgroundColor: theme.palette.warning.main,
    '&:hover': {
      backgroundColor: theme.palette.warning.dark,
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: theme.palette.warning.main,
      },
    },
  },
  /* Styles applied to the root element if `variant="contained"` and `color="secondary"`. */
  containedError: {
    color: theme.palette.error.contrastText,
    backgroundColor: theme.palette.error.main,
    '&:hover': {
      backgroundColor: theme.palette.error.dark,
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: theme.palette.error.main,
      },
    },
  },
  /* Pseudo-class applied to the root element if `disabled={true}`. */
  disabled: {},
  /* Styles applied to the root element if `size="small"`. */
  sizeSmall: {
    padding: 3,
    fontSize: theme.typography.pxToRem(18),
  },
  /* Styles applied to the children container element. */
  label: {
    width: '100%',
    display: 'flex',
    alignItems: 'inherit',
    justifyContent: 'inherit',
    "& .MuiSvgIcon-root": {
      width: theme.typography.pxToRem(20),
      height: theme.typography.pxToRem(20)
    }
  },
});

/**
 * Refer to the [Icons](/components/icons/) section of the documentation
 * regarding the available icon options.
 */
const IconButton = React.forwardRef(function IconButton(props, ref) {
  const {
    edge = false,
    children,
    classes,
    className,
    color = 'primary',
    disabled = false,
    disableFocusRipple = false,
    size = 'medium',
    variant = 'text',
    ...other
  } = props;

  return (
    <ButtonBase
      className={clsx(
        classes.root,
        {
          [classes[`${variant}${capitalize(color)}`]]: color !== 'default' && color !== 'inherit',
          [classes.disabled]: disabled,
          [classes[`size${capitalize(size)}`]]: size !== 'medium',
          [classes.edgeStart]: edge === 'start',
          [classes.edgeEnd]: edge === 'end',
        },
        className,
      )}
      centerRipple
      focusRipple={!disableFocusRipple}
      disabled={disabled}
      ref={ref}
      {...other}
    >
      <span className={classes.label}>{children}</span>
    </ButtonBase>
  );
});

IconButton.propTypes = {
  /**
   * The icon element.
   */
  children: chainPropTypes(PropTypes.node, (props) => {
    const found = React.Children.toArray(props.children).some(
      (child) => React.isValidElement(child) && child.props.onClick,
    );

    if (found) {
      return new Error(
        [
          'Material-UI: You are providing an onClick event listener ' +
            'to a child of a button element.',
          'Firefox will never trigger the event.',
          'You should move the onClick listener to the parent button element.',
          'https://github.com/mui-org/material-ui/issues/13957',
        ].join('\n'),
      );
    }

    return null;
  }),
  /**
   * Override or extend the styles applied to the component.
   * See [CSS API](#css) below for more details.
   */
  classes: PropTypes.object.isRequired,
  /**
   * @ignore
   */
  className: PropTypes.string,
  /**
   * The color of the component. It supports those theme colors that make sense for this component.
   */
  color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'text', 'on', 'off', 'error', 'white']),
  /**
   * If `true`, the button will be disabled.
   */
  disabled: PropTypes.bool,
  /**
   * If `true`, the  keyboard focus ripple will be disabled.
   */
  disableFocusRipple: PropTypes.bool,
  /**
   * If `true`, the ripple effect will be disabled.
   */
  disableRipple: PropTypes.bool,
  /**
   * If given, uses a negative margin to counteract the padding on one
   * side (this is often helpful for aligning the left or right
   * side of the icon with content above or below, without ruining the border
   * size and shape).
   */
  edge: PropTypes.oneOf(['start', 'end', false]),
  /**
   * The size of the button.
   * `small` is equivalent to the dense button styling.
   */
  size: PropTypes.oneOf(['small', 'medium']),
  /**
   * The variant to use.
   */
  variant: PropTypes.oneOf(['contained', 'outlined', 'text']),
};

export default withStyles(styles, { name: 'AgatheIconButton' })(IconButton);

这个实现在深色模式下会出现错误，而且似乎难以维护。非常感谢你的帮助！

- Xiyitifu

---

真遗憾，我希望有人能回答你的问题。我也有同样的问题，但到目前为止搜索也没有什么收获。 - Ian Rios

非常抱歉，很遗憾我不再参与这个项目了，而且我也没有找到其他的解决方案！ - Xiyitifu

我最终使用了Fab组件！它完全满足了我的需求。https://mui.com/material-ui/react-floating-action-button/ - Ian Rios

是的，那不是完全相同的问题。 - Xiyitifu

是的，我知道，但对于我的使用情况来说已经足够接近了。 - Ian Rios

Answer 1

如果使用 MUI v5，您可以使用以下组件来模拟 Button 组件上的 variant 属性，以用于 IconButtons：

const StyledIconButton = styled(IconButton)<{
    variant?: Exclude<ButtonProps['variant'], 'text'>;
}>(({ theme, variant, color }) => {
    const overrides: CSSObject = {};

    const colorAsVariant = color === undefined || color === 'inherit' || color === 'default' ? 'primary' : color;

    if (variant === 'contained') {
        overrides.backgroundColor = theme.palette[colorAsVariant].main;
        overrides.color = theme.palette[colorAsVariant].contrastText;
        overrides[':hover'] = {
            backgroundColor: theme.palette[colorAsVariant].dark,
        };
    }

    if (variant === 'outlined') {
        overrides.border = `1px solid ${theme.palette[colorAsVariant].main}`;
        overrides.color = theme.palette[colorAsVariant].main;
    }

    return {
        ...overrides,
    };
});

然后它将被用作这样：

<StyledIconButton variant="contained">
    <LoopIcon />
</StyledIconButton>

示例 CodeSandbox

- C. B. Prosser

---

如果您同意我在下面的答案中所做的改进，请更新您的答案，我可以删除我的答案以避免重复您的代码。 - Viljami

Answer 2

改进了C.B. Prosser编写的原始答案。

• 根据Mui主题悬停设置悬停颜色
• 添加outlined-reverse变体
• 防止轮廓溢出按钮外部

type IconButtonVariant = Exclude<ButtonProps["variant"], "text"> | "outlined-reverse";

const StyledIconButton = styled(IconButton)<{
    variant?: IconButtonVariant;
}>(({ theme, variant, color, disabled }) => {
    const overrides: CSSObject = {};
    overrides.borderRadius = theme.spacing(1);

    const colorAsVariant =
        color === undefined || color === "inherit" || color === "default"
            ? "primary"
            : color;
    if (variant === "contained") {
        if (disabled) {
            overrides["&:disabled"] = {
                backgroundColor: theme.palette.action.disabled,
            };
        }
        overrides[":hover"] = {
            backgroundColor: getHoverColorFromHex(
                theme.palette[colorAsVariant].main
            ),
        };
        overrides.backgroundColor = theme.palette[colorAsVariant].main;
        overrides.color = theme.palette[colorAsVariant].contrastText;
    }
    if (variant === "outlined") {
        overrides.outline = `1px solid ${
            disabled
                ? theme.palette.action.disabled
                : theme.palette[colorAsVariant].main
        }`;
        overrides.outlineOffset = "-1px";
        overrides.color = theme.palette[colorAsVariant].main;
    }
    if (variant === "outlined-reverse") {
        overrides.backgroundColor = theme.palette[colorAsVariant].main;
        overrides.outline = `1px solid ${theme.palette[colorAsVariant].contrastText}`;
        overrides.outlineOffset = "-1px";
        overrides.color = theme.palette[colorAsVariant].contrastText;
    }

    return {
        ...overrides,
    };
});

function hexToRgb(hex: any) {
    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(
        shorthandRegex,
        function (m: any, r: any, g: any, b: any) {
            return r + r + g + g + b + b;
        }
    );

    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result
        ? {
                r: parseInt(result[1], 16),
                g: parseInt(result[2], 16),
                b: parseInt(result[3], 16),
          }
        : null;
}

function getHoverColorFromHex(hex: any) {
    const rgb = hexToRgb(hex);
    if (rgb) {
        return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.8)`;
    }
    return hex;
}

- Viljami