How to remove outline from Material UI button using by breakpoint

Question

I want to remove the outlined variant at the small medium and down breakpoint. To do this, I have tried to do the following:

const variantType = theme.breakpoints.down('md') ? '' : 'outlined';

<Button name="buyFood" variant={variantType} onClick={this.openFoodModal}>
  Buy
</Button>;

This does not do the job. I have tried researching and no one seemed to ask this question before. So here is the first of its kind. lol

Answer 1

You can do this by using the useTheme and the useMediaQuery hooks from Material UI.

import { Button, useTheme, useMediaQuery } from '@material-ui/core'

export default function App() {
  const theme = useTheme();
  const mediumDown = useMediaQuery(theme.breakpoints.down('md'));

  return (
    <div className="App">
      <Button name="buyFood" variant={mediumDown? 'text' : 'outlined' } onClick={this.openFoodModal}>
        Smart Suggest
      </Button>
    </div>
  );
}