Material UI の theme を使って styled-components 内で media query を指定する

styled-components の中で breakpoints 指定する際の簡単な方法です。
Material UI の theme を使用する前提です。

const ModalCard = styled.div`
  background: white;
  width: 600px;
  position: absolute;
  left: calc((100% - 600px) / 2);
  ${theme.breakpoints.down('xs')} {
    width: 100%;
    left: 0;
  }

解説

theme.breakpoints の返り値が css に直接使える API になっています。
https://material-ui.com/layout/breakpoints/#api

theme.breakpoints.down('xs')
// @media (max-width: 599.95px)

なので以下のような css が出力されます。

@media (max-width: 599.95px)
.jJmNcV {
}