StyledButtonValid.tsx

import React from 'react'
import MuiButton, { ButtonProps } from '@material-ui/core/Button'
import {
  withStyles,
  MuiThemeProvider,
  createMuiTheme,
} from '@material-ui/core/styles'

const primaryColor = window
  .getComputedStyle(document.documentElement)
  .getPropertyValue('--blue')
  .trim()
const secondaryColor = window
  .getComputedStyle(document.documentElement)
  .getPropertyValue('--greyDark')
  .trim()

const theme = createMuiTheme({
  typography: {
    useNextVariants: true,
  },
  shape: {
    borderRadius: 3,
  },
  palette: {
    primary: {
      main: primaryColor,
    },
    secondary: {
      main: secondaryColor,
    },
  },
})

const BaseButton = withStyles({
  root: {
    height: '3rem',
    margin: '0.5rem 0rem',
    padding: '0px 1px',
  },
  label: {
    textTransform: 'none',
    fontFamily: 'Lato, sans-serif',
    fontStyle: 'normal',
    fontSize: '1rem',
    lineHeight: '120%',
  },
})(MuiButton)

const PrimaryButton = withStyles({
  root: {
    background: 'var(--blueBackground)',
  },
  label: {
    color: 'var(--textBlack)',
    fontWeight: 'bold',
  },
})(BaseButton)

const SecondaryButton = withStyles({
  label: {
    color: 'var(--textBright)',
    fontWeight: 'normal',
  },
})(BaseButton)

function MyButton(props: ButtonProps) {
  return props.color === 'secondary' ? (
    <SecondaryButton
      fullWidth
      color="secondary"
      variant="outlined"
      {...props}
    />
  ) : (
    <PrimaryButton fullWidth color="primary" variant="contained" {...props} />
  )
}

const StyledButtonValid: React.ComponentType<ButtonProps> = props => {
  return (
    <>
      <MuiThemeProvider theme={theme}>
        <MyButton {...props}>{props.children}</MyButton>
      </MuiThemeProvider>
    </>
  )
}

StyledButtonValid.defaultProps = {
  color: 'primary',
}

export default StyledButtonValid