MUI の sx props を活用して線に挟まれた見出しを作る方法

2022-04-28

Feature image for this page

こぷらです。 今回は MUI を使って線で挟まれた見出しを作る方法を紹介します。 線で挟まれた見出しとは以下のようなものです。

Sample image for heading

Sample image for heading

ちなみに MUI とはスタイル済みの美しいコンポーネント郡を提供してくれるライブラリです。 こちらでも紹介しているので、気になる方は御覧ください。 公式のドキュメントは以下になります。

それでは早速見ていきましょう

コード例

早速ですが、コード例を紹介します。

肝になるのは Box コンポーネントの sx props で設定した css 部分です

    <Box
  sx={{
    display: "flex",
    alignItems: "center",
    "&::before, &::after": {
      borderTop: "solid 1px",
      content: '""',
      flexGrow: 1
    },
    "&::before": {
      mr: 1
    },
    "&::after": {
      ml: 1
    }
  }}
>
  <Typography variant="h5">Heading</Typography>
</Box>

要素をフレックスボックスで表示して中央揃えします。 その上で、上部の border だけが設定された空の疑似要素 before, after を定義しています。 また各疑似要素に flexGrow: 1 を設定することで、子要素の外側いっぱいに横線が伸びるようにしています。 最後に見出し周辺を見やすくするための margin をセットしています、ここはお好みで。

ちなみに、横線部分は Box コンポーネントに分離してあるため、 Typography を入れ替えて別のコンポーネントに切り替えても動作します。 文字以外で映えるレイアウトは思いつかないですが、、、 なにかいい案があれば、Twitter なりで教えてくれると嬉しいです。

まとめ

今回は、MUI の sx props を活用して線で挟まれた見出しを作る方法を紹介しました。 MUI には Divider という横線を描画するためのコンポーネントもあるので、そちらを使ってもいいと思います。 ただ、今回はあえて css を使って実装することで、少しでも MUI の依存度を下げてみました。

それでは。


Profile picture

Written by Coppla

職業:ソフトウェアエンジニア - 会社では精密機械の制御系ソフトウェアの開発を、プライベートで Web アプリ制作の勉強をしています。趣味は旅行と美味しいものを食べること

Categories

© 2022 Coppla, Built with Gatsby