这是我的第一篇文章，如果我忘记了什么，很抱歉......
对于我的工作，我必须使用 Material UI，并且我需要一个具有一些包含样式（如真正的按钮）的 IconButton！
我设法使用 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);
这个实现还给我带来了黑暗模式的错误，并且似乎很难维护。 非常感谢您的帮助！
如果使用 MUI v5，您可以使用以下组件来模仿 IconButtons 的 Button 组件上的变体属性：
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>
改进了 C. B. Prosser 撰写的原始答案。
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;
}
仅使用 TS 和 Mui v5 - 如果您熟悉模块增强和自定义覆盖，这就是如何以更复杂的方式完成它（纯样式，不需要创建样式组件）。
您需要一个名为“variant”的新属性作为 IconButtonProps 的一部分（在生成主题配置的 index.ts 文件中）：
declare module '@mui/material/IconButton' {
interface IconButtonOwnProps {
variant?: 'standard' | 'contained';
}
}
现在在您的主题配置对象中：
const themeConfig : ThemeOptions = {
...
components: {
MuiIconButton: {
root: ({ theme, ownerState }) => ({
padding: 1,
borderWidth: '2px',
borderStyle: 'solid',
borderColor: 'transparent',
...(ownerState.variant === 'contained'
? {
[`&.${iconButtonClasses.disabled}`]: {
backgroundColor: alpha(
ownerState.color === 'success'
? theme.palette.success[700]
: ownerState.color === 'error'
? theme.palette.error[700]
: ownerState.color === 'warning'
? theme.palette.warning[700]
: ownerState.color === 'primary'
? theme.palette.primary[700]
: ownerState.color === 'secondary'
? theme.palette.secondary[700]
: ownerState.color === 'subtle'
? theme.palette.subtle[700]
: ownerState.color === 'highlight'
? theme.palette.highlight[700]
: ownerState.color === 'tertiary'
? theme.palette.tertiary[700]
: theme.palette.grey[700],
0.55
),
},
[`&:hover`]: {
backgroundColor:
ownerState.color === 'success'
? theme.palette.success[800]
: ownerState.color === 'error'
? theme.palette.error[800]
: ownerState.color === 'warning'
? theme.palette.warning[800]
: ownerState.color === 'primary'
? theme.palette.primary[800]
: ownerState.color === 'secondary'
? theme.palette.secondary[800]
: ownerState.color === 'subtle'
? theme.palette.subtle[800]
: ownerState.color === 'highlight'
? theme.palette.highlight[700]
: ownerState.color === 'tertiary'
? theme.palette.tertiary[800]
: theme.palette.grey[800],
},
[`&:focus.Mui-focusVisible`]: {
boxShadow: `2px 3px 6px ${theme.palette.grey[500]}`,
},
backgroundColor:
ownerState.color === 'success'
? theme.palette.success[700]
: ownerState.color === 'error'
? theme.palette.error[700]
: ownerState.color === 'warning'
? theme.palette.warning[700]
: ownerState.color === 'primary'
? theme.palette.primary[700]
: ownerState.color === 'secondary'
? theme.palette.secondary[700]
: ownerState.color === 'subtle'
? theme.palette.subtle[700]
: ownerState.color === 'highlight'
? theme.palette.highlight[700]
: ownerState.color === 'tertiary'
? theme.palette.tertiary[700]
: theme.palette.grey[700],
color:
ownerState.color === 'success'
? theme.palette.success.contrastText
: ownerState.color === 'error'
? theme.palette.error.contrastText
: ownerState.color === 'warning'
? theme.palette.warning.contrastText
: ownerState.color === 'primary'
? theme.palette.primary.contrastText
: ownerState.color === 'secondary'
? theme.palette.secondary.contrastText
: ownerState.color === 'subtle'
? theme.palette.subtle.contrastText
: ownerState.color === 'highlight'
? theme.palette.highlight.contrastText
: ownerState.color === 'tertiary'
? theme.palette.tertiary.contrastText
: '#fff',
}
: {
[`&:focus.Mui-focusVisible`]: {
borderColor: `${theme.palette.secondary.main}`,
},
}),
fontSize: 22,
}),
},
}
};
您可以根据您的喜好自定义“包含”变体类型的样式。
现在您可以使用原生 Mui 提供的开箱即用
IconButtonvariant<IconButton sx={{ mr: 3 }} variant='contained'>
<DeleteIcon fontSize='inherit' />
</IconButton>