StyledClearGreyButton.tsx

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

//required to obtain color from scss because createMuiTheme doesn't support the use of var(--color)
const color = window
  .getComputedStyle(document.documentElement)
  .getPropertyValue('--greyDark')
  .trim()

const theme = createMuiTheme({
  typography: {
    useNextVariants: true,
  },
  shape: {
    borderRadius: 2,
  },
  palette: {
    primary: {
      main: color,
    },
    secondary: {
      main: color,
    },
  },
})

const BaseButton = withStyles({
  root: {
    minHeight: '2.5rem',
    padding: '0.25rem',
  },
  label: {
    textTransform: 'none',
    fontFamily: 'Lato, sans-serif',
    fontStyle: 'normal',
    fontSize: '1rem',
    lineHeight: '120%',
  },
})(MuiButton)

const PrimaryButton = withStyles({
  label: {
    color: 'var(--greyDark)',
    fontWeight: 'bold',
  },
})(BaseButton)

const SecondaryButton = withStyles({
  root: {
    border: '1px solid #7B7B7B',
  },
  label: {
    color: 'var(--greyDark)',
    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 StyledClearGreyButton: React.ComponentType<ButtonProps> = props => {
  return (
    <>
      <MuiThemeProvider theme={theme}>
        <MyButton {...props}>{props.children}</MyButton>
      </MuiThemeProvider>
    </>
  )
}

export default StyledClearGreyButton