[英]Using useMediaQuery in material ui?
所以在构建了完整的 web 应用程序之后,我决定让它对移动设备友好。 我正在使用带有反应的材料 ui 框架。 我阅读了文档,但不确定 2 如何使用它。 所以让我给你一个概述,我认为如何工作
说我有这个组件
function App() {
const matches = useMediaQuery(theme.breakpoints.down('sm'));
return (
<Button variant="contained" color="primary">
</Button>
);
}
因此,如果我想根据断点将 styles 应用于按钮(在本例中为“sm”),我会这样做:
...
<Button styles={{matches? mobileBtn : desktopBtn}}>
...
假设我已经定义mobileBtn
和desktopBtn
。
这是使用它的正确方法,还是有其他标准方法可以这样做。 虽然我不认为有,因为如果有的话,它会包含在文档中。
如果我正确理解您的问题, makeStyles
中有一个内置的断点机制,因此如果您只想更改 styles,则不需要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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.