javascript - 在 Material ui 中使用 useMediaQuery？

Question

因此，在构建完整的 Web 应用程序之后，我决定使其适合移动设备。我正在使用带有反应的 Material ui 框架。我阅读了文档，但不确定 2 如何使用它。因此，让我概述一下我认为如何工作

假设我有这个组件

function App() {
  const matches = useMediaQuery(theme.breakpoints.down('sm'));
  return (
    <Button variant="contained" color="primary">
    </Button>
  );
}

因此，如果我想根据断点(在本例中为“sm”)将样式应用于按钮，我会这样做:

...
<Button styles={{matches? mobileBtn : desktopBtn}}>
...

假设我已经定义了 mobileBtn 和 desktopBtn。

这是使用它的正确方法，还是有其他一些标准方法可以这样做。虽然我不认为有，因为如果有它会包含在文档中。

Answer 1

如果我正确理解你的问题，有一个 built-in breakpoints mechanizm在 makeStyles 中，因此如果您只想更改样式，则不需要 useMediaQuery。

例如:

const useStyles = makeStyles((theme) => ({
  button: {
    padding: 8,
    backgroundColor: 'green',

    [theme.breakpoints.down('sm')]: {
      backgroundColor: 'red'
    },
  },
}));

function App() {
  const classes = useStyles();
  return (
    <Button variant="contained" className={classes.button}>
      Hello World
    </Button>
  );
}

https://codesandbox.io/s/restless-night-4zn76?file=/index.js