javascript - 如何使用断点从 Material UI 按钮中删除轮廓

Question

我想删除 outlined中小断点处的变体。为此，我尝试执行以下操作:

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

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

这不起作用。我试过研究，以前似乎没有人问过这个问题。所以这是同类产品中的第一个。哈哈

Answer 1

您可以使用 useTheme 来做到这一点。和 useMediaQuery 来自 Material UI 的钩子(Hook)。

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>
  );
}