Mantineでのレスポンシブ
11834 ワード
mantineでレスポンシブ対応するときに[`@media (max-width: ${theme.breakpoints.xl}px)`]といちいち書くのはめんどくさい🙃
せっかくthemeで設定しているのに使えないわけはないのでは？🤔となり調べた
該当ページと該当コード
import { createStyles } from '@mantine/core';
const useStyles = createStyles((theme) => ({
container: {
height: 100,
backgroundColor: theme.colors.blue[6],
// Media query with value from theme
[`@media (max-width: ${theme.breakpoints.xl}px)`]: {
backgroundColor: theme.colors.pink[6],
},
// Static media query
'@media (max-width: 800px)': {
backgroundColor: theme.colors.orange[6],
},
},
}));
function Demo() {
const { classes } = useStyles();
return <div className={classes.container} />;
}
結論 theme functionを使えばいける😎
Responsive stylesの次のページに書いてあるTheme functionsのsmallerThanかlargerThanを使えばいいつまり、先程のコードは下記のようにも書ける😎
Media queries in createStyles
import { createStyles } from '@mantine/core';
const useStyles = createStyles((theme) => ({
container: {
height: 100,
backgroundColor: theme.colors.blue[6],
// Media query with value from theme
- [`@media (max-width: ${theme.breakpoints.xl}px)`]: {
+ [theme.fn.smallerThan('xl')]: {
backgroundColor: theme.colors.pink[6],
},
// Static media query
- '@media (max-width: 800px)': {
+ [theme.fn.smallerThan(800)]: {
backgroundColor: theme.colors.orange[6],
},
},
}));
function Demo() {
const { classes } = useStyles();
return <div className={classes.container} />;
}
他にも便利な関数があって良き🥰
Author And Source
この問題について(Mantineでのレスポンシブ), 我々は、より多くの情報をここで見つけました https://zenn.dev/hisho/articles/2fee2477509713著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol