import React from 'react' ; import Button , { ButtonProps } from '@material-ui/core/Button' ; import makeStyles from "@material-ui/core/styles/makeStyles" ; import isEqual from "react-fast-compare" ; import { createStyles , darken } from '@material-ui/core/styles' ; const useStyles = makeStyles ( ( theme ) => { return createStyles ( { root : ( props ) => ( { color : theme . palette . getContrastText ( props . color ) , backgroundColor : props . color , '&:hover' : { backgroundColor : darken ( props . color , 0.3 ) , } , } ) , } ) ; } ) ; interface IProps extends Omit < ButtonProps , "color" > { readonly color : string ; } export const ColorButton = React . memo ( function ColorButton ( props ) { const classes = useStyles ( props ) ; const buttonProps = { ... props } ; delete buttonProps . color ; return ( < Button className = { `${ classes . root }` } { ... buttonProps } > { props . children } < /Button>); } , isEqual ) ;