这是我的第一篇文章，如果我忘记了什么，对不起......
对于我的工作，我必须使用 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);
这个实现也给我一个黑暗模式的错误，似乎很难维护。非常感谢你的帮助 ！