Mui5で<*Actions/>に違う要素を並べると隙間が無くなる件

Mui（Material UI）のv5では<CardActions/>や<DialogActions/>に異なる要素を並べた時に、marginが確保されなくなる問題があります。

<DialogActions>
  <Button size="medium" variant="outlined">
    Cancel
  </Button>
  <Box sx={{ position: 'relative' }}>
    <CircularProgress
      size={24}
      sx={{ position: 'absolute', top: '50%', left: '50%', margin: '-12px' }}
    />
    <Button size="medium" variant="contained" disabled>
      Apply
    </Button>
  </Box>
</DialogActions>

想定される動作はMui4までと同様に「2つめ以降の要素にはmargin-leftが設定されて適度な余白が付く」なのですが、実際は上のスクショのようにぴったりとくっついてしまいます。

v4ではこう実装されていたものが、

https://github.com/mui/material-ui/blob/d93b33602ff8b7b679f242544761d30b3443ec0b/packages/material-ui/src/CardActions/CardActions.js#L15-L17

v5になってCSSセレクタが:not(:first-child)から:not(:first-of-type)に変更されたのが原因です。

https://github.com/mui/material-ui/blob/ba2fce43a735f6085e68c2d76ab746a098488862/packages/mui-material/src/CardActions/CardActions.js#L32-L34

issueは立っているのですが、直近で修正される予定はないらしく「v6になったらgapでいい感じにするかなぁ」ぐらいの温度感のようです。

https://github.com/mui/material-ui/issues/29819

CSSセレクタが変更されたのは、Mui5で採用されたCSS-in-JSライブラリのemotionが:first-childを避けるよう警告するのが理由のようです。

仕方ないので、同じ要素が並ぶように書いてやります。

<DialogActions>
  <Box>
    <Button size="medium" variant="outlined">
      Cancel
    </Button>
  </Box>
  <Box sx={{ position: 'relative' }}>
    <CircularProgress
      size={24}
      sx={{ position: 'absolute', top: '50%', left: '50%', margin: '-12px' }}
    />
    <Button size="medium" variant="contained" disabled>
      Apply
    </Button>
  </Box>
</DialogActions>

ここではMuiの<Box/>を置いていますが、CSSセレクタの問題なので違うComponentでも同じHTMLの要素になれば問題ないです。とは言え実装に依存するので、同じComponentを並べるのが無難ですね。

既存プロダクトのバージョンアップなんかだと面倒だったりもしますが、今のところアプリケーション側で頑張ることになりそうです。