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?