自定义按钮组件始终处于禁用状态

由 发布于 reactjsmaterial-ui
 收藏

This is my current code for a Button component I am building for my web app.

import React from 'react'
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles({
  root: {
    fontFamily: 'Nunito, sans-serif',
    textTransform: 'none',
    padding: '0.5rem 1rem'
  },
})

export default ({
  variant,
  onClick,
  fullWidth,
  disabled,
  color,
  size,
  icon,
  disableElevation,
  children,
  ...otherProps
}) => {
  const classes = useStyles()

  return (
    <Button
      variant={variant}
      onClick={onClick}
      fullWidth={fullWidth}
      disabled={disabled}
      color={color}
      size={size}
      classes={classes}
      startIcon={icon}
      disableElevation
      {...otherProps}
    >
      {children}
    </Button>
  )
}

Button.propTypes = {
  variant: PropTypes.oneOf(["text", "outlined", "contained"]),
  onClick: PropTypes.func,
  fullWidth: PropTypes.bool,
  disabled: PropTypes.bool,
  color: PropTypes.oneOf(['primary', 'secondary']).isRequired,
  size: PropTypes.oneOf(["small", "medium", "large"]),
  startIcon: PropTypes.node,
  disableElevation: PropTypes.bool
};

Button.defaultProps = {
  variant: "contained",
  fullWidth: false,
  disabled: false,
  color: "primary",
  size: "medium",
  disableElevation: true
}

When I load the button component in my app, in all the places where I am calling the button, the button all seem to be in the disabled state, and the only way they are not is if I explicitly add disable={false} on each button component. Any idea why this would be happening?

评论