React + Material-UI の Styles で メディアクエリ

はじめに

いちいちコンポーネントで書く必要性は見当たらないが、一応可能
配列＋バッククォートとか余計な書き方しなくてもいけるということに公開してすぐ気づいた人、、

コード

import { Grid, List, ListItem } from "@material-ui/core";
import { makeStyles } from "@mui/styles";

const useStyles = makeStyles(() => ({
  root: {
    // Root共通
    display: "flex",
    height: "100vh",
    // 各メディアクエリ設定
    "@media (min-width:1280px)": {
      "& .main > sub": {
        width: "20%",
      },
    },
    "@media (min-width:800px) and (max-width:1279px)": {
      "& .main > sub": {
        width: "30%",
      },
    },
    "@media (max-width:799px)": {
      "& .main > sub": {
        width: "40%",
      },
    },
  },
}));

function App() {
    // classオブジェクト生成
    const classes = useStyles();
  
    return (
      <Grid className={classes.root}>
        <List className={["main"]}>
            <ListItem className={["sub"]}>hoge1</ListItem>
            <ListItem className={["sub"]}>hoge2</ListItem>
            <ListItem className={["sub"]}>hoge3</ListItem>
            <ListItem className={["sub"]}>hoge4</ListItem>
            <ListItem className={["sub"]}>hoge5</ListItem>
        </List>
      </Grid>
    );
  }
  
  export default App;

終わりに

"& .main > sub" については "& .main > li" とかにして、subのclass名を取った方がスマートではあるが、わかりやすさ優先