const useStyles = makeStyles(theme => ({
wrapper: {
width: "300px"
},
text: {
width: "100%"
},
button: {
width: "100%",
marginTop: theme.spacing(1)
},
select: {
width: "100%",
marginTop: theme.spacing(1)
}
}));
有没有办法在上述变量中使用 CSS @media？
如果不可能，我怎样才能使我的自定义 css 响应？
下面是一个示例，显示了在其中指定媒体查询的两种方法makeStyles（再往下是使用 的 v5 示例styled）。您可以使用up，down，only，和between在功能theme.breakpoints（这基于在主题中指定的断点你的媒体查询字符串），也可以直接使用媒体查询。
import React from "react";
import Button from "@material-ui/core/Button";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles(theme => ({
button: {
color: "white",
[theme.breakpoints.down("xs")]: {
marginTop: theme.spacing(1),
backgroundColor: "purple"
},
[theme.breakpoints.between("sm", "md")]: {
marginTop: theme.spacing(3),
backgroundColor: "blue"
},
"@media (min-width: 1280px)": {
marginTop: theme.spacing(5),
backgroundColor: "red"
}
}
}));
export default function App() {
const classes = useStyles();
return (
<Button className={classes.button} variant="contained">
Hello World!
</Button>
);
}
相关文档：
下面是使用 Material-UI v5 的类似示例。这已调整为使用styled替代makeStyles和使用theme.breakpoints.down，并theme.breakpoints.between基于该行为变化为这些功能进行了调整（down现在是独家指定的断点，而不是包容和结束断点between现在也是矛盾的，因此对于这那些指定的断点需要与 v4 中使用的断点一致）。此外，min-width直接指定的媒体查询的 已从 调整1280px为1200px以匹配lgv5 中断点的新值。
import React from "react";
import Button from "@material-ui/core/Button";
import { styled } from "@material-ui/core/styles";
const StyledButton = styled(Button)(({ theme }) => ({
color: "white",
[theme.breakpoints.down("sm")]: {
marginTop: theme.spacing(1),
backgroundColor: "purple"
},
[theme.breakpoints.between("sm", "lg")]: {
marginTop: theme.spacing(3),
backgroundColor: "blue"
},
"@media (min-width: 1200px)": {
marginTop: theme.spacing(5),
backgroundColor: "red"
}
}));
export default function App() {
return <StyledButton variant="contained">Hello World!</StyledButton>;
}
关于从 v4 到 v5 的断点更改的文档：https : //next.material-ui.com/guides/migration-v4/#theme