如何解决Material UI - 自定义 IconButton，带有像真正的 Button 一样的变体道具
这是我的第一篇文章，很抱歉，如果我忘记了什么......
对于我的工作，我必须使用 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,/* 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,/* 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),/* 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),/* 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,/* 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,'&$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.23)' : 'rgba(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,/* 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,'&:hover': {
border: `1px solid ${theme.palette.secondary.main}`,backgroundColor: fade(theme.palette.secondary.main,'&$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),'&:hover': {
border: `1px solid ${theme.palette.getContrastText(theme.palette.background.relevant)}`,backgroundColor: fade(theme.palette.getContrastText(theme.palette.background.relevant),label: {
color: theme.palette.text.primary,/* 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,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,/* 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],it doesn't add specificity
'@media (hover: none)': {
BoxShadow: theme.shadows[2],'&$disabled': {
backgroundColor: theme.palette.action.disabledBackground,'&$focusVisible': {
BoxShadow: theme.shadows[6],'&:active': {
BoxShadow: theme.shadows[8],'&$disabled': {
color: theme.palette.action.disabled,/* 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,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,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,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,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,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,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',)}
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,the keyboard focus ripple will be disabled.
*/
disableFocusRipple: PropTypes.bool,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);
这个实现也给我一个黑暗模式的错误，似乎很难维护。 非常感谢您的帮助！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
