【React.js】makeStylesのスタイル指定方法

React.js（Next.js）で実装する際にmakeStylesの利用方法を調べたので、忘れないようにメモ。
気になるものがあったら、順次追記していきます。

---

coin-look.pages.dev

---

first-child

特に迷うことは無い。

const useStyles = makeStyles({
  root: {
    '& div:first-child': {
       ....
    },
});

last-child

first-childと同様。

const useStyles = makeStyles({
  root: {
    '& div:last-child': {
       ....
    },
});

nth-child

スタイルを指定したい要素の中に&:nth-child(n)という形式で定義する。

const useStyles = makeStyles({
  root: {
    '&:nth-child(2)': {
       ....
    },
});

not

&:not(:~)という形で指定可能。　　

const useStyles = makeStyles({
  root: {
    '&:not(:nth-child(2))': {
       ....
    },
});

メディアクエリ

@media (min-width:1280px)のような形で指定可能。　　

const useStyles = makeStyles({
  root: {
    display: 'flex',
    '@media (max-width:1024px)': {
      display: 'block',
      ....
    },
});