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 響應式？
1 回答
小唯快跑啊
TA貢獻1863條經驗 獲得超2個贊
下面是一個示例，顯示了在其中指定媒體查詢的兩種方法makeStyles（下面是使用 的 v5 示例styled）。您可以在theme.breakpoints中使用up、down、only和between函數（它們根據主題中指定的斷點為您生成媒體查詢字符串），也可以直接使用媒體查詢。
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 的類似示例。這已調整為 usestyled而不是 ，并且和makeStyles的用法已根據這些函數的行為變化進行了調整（現在不包含指定的斷點而不是包含，并且結束斷點現在也是獨占的，因此對于指定的斷點需要比 v4 中使用的斷點大一）。此外，直接指定的媒體查詢的 已從 調整為 ，以匹配v5 中斷點的新值。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 關注
- 113 瀏覽
添加回答
舉報
0/150
提交
取消