const useStyles = makeStyles(theme => ({ wrapper: { width: "300px" }, text: { width: "100%" }, button: { width: "100%", marginTop: theme.spacing(1) }, select: { width: "100%", marginTop: theme.spacing(1) }}));有沒(méi)有辦法在上面的變量中使用 CSS @media ？如果不可能，我怎樣才能使我的自定義 CSS 響應(yīng)式？
1 回答
小唯快跑啊
TA貢獻(xiàn)1863條經(jīng)驗(yàn) 獲得超2個(gè)贊
下面是一個(gè)示例，顯示了在其中指定媒體查詢的兩種方法makeStyles（下面是使用 的 v5 示例styled）。您可以在theme.breakpoints中使用up、down、only和between函數(shù)（它們根據(jù)主題中指定的斷點(diǎn)為您生成媒體查詢字符串），也可以直接使用媒體查詢。
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 的類似示例。這已調(diào)整為 usestyled而不是 ，并且和makeStyles的用法已根據(jù)這些函數(shù)的行為變化進(jìn)行了調(diào)整（現(xiàn)在不包含指定的斷點(diǎn)而不是包含，并且結(jié)束斷點(diǎn)現(xiàn)在也是獨(dú)占的，因此對(duì)于指定的斷點(diǎn)需要比 v4 中使用的斷點(diǎn)大一）。此外，直接指定的媒體查詢的 已從 調(diào)整為 ，以匹配v5 中斷點(diǎn)的新值。theme.breakpoints.downtheme.breakpoints.betweendownbetweenmin-width1280px1200pxlg
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>;
}
- 1 回答
- 0 關(guān)注
- 109 瀏覽
添加回答
舉報(bào)
0/150
提交
取消