[Material-UI] makeStyles（CSS in JS）を使って同心円を描画する

こんにちは、CX事業本部 IoT事業部の若槻です。

React向けのUIライブラリMaterial-UIでは、@material-ui/styles ComponentのmakeStylesを使うことにより、CSS in JSでのReact要素のスタイリングを行うことができます。

• @material-ui/styles - Material-UI

今回は、makeStyles（CSS in JS）を使って同心円を書いてみました。

円1つの場合

デモ

コード概要

src/App.tsx

import React from "react";
import { makeStyles } from "@material-ui/core/styles";

//makeStylesでCSS in JSのスタイルを定義
const useStyles = makeStyles({
  outerCircle: {
    margin: "auto",
    width: "300px",
    height: "300px",
    position: "relative",
    border: "solid #4169e1 5px",
    "border-radius": "50%"
  }
});

export const App: React.FC = () => {
  const classes = useStyles();

  return (
    <>
      <div className={classes.outerCircle}></div>
    </>
  );
};

• @material-ui/stylesでのCSS in JSの定義はmakeStylesを使用します。
• makeStylesではオブジェクト形式であること以外は、通常のCSSとほぼ同じ書き方が可能です。
• CSSで円を描く場合は"border-radius": "50%"とします。これによりボーダーの角の半径が最大となり、円を描くことができます。
• 作成したスタイルをReact要素（JSXタグ）に適用すれば円を描画できます。

円2つの同心円

デモ

コード概要

src/App.tsx

import React from "react";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  outerCircle: {
    margin: "auto",
    width: "300px",
    height: "300px",
    position: "relative",
    border: "solid #4169e1 5px",
    "border-radius": "50%"
  },
  innerCircle1: {
    width: "250px",
    height: "250px",
    position: "absolute",
    border: "solid #4169e1 5px",
    "border-radius": "50%",
    top: "50%",
    left: "50%",
    transform: "translate(-50%,-50%)"
  }
});

export const App: React.FC = () => {
  const classes = useStyles();

  return (
    <>
      <div className={classes.outerCircle}>
        <div className={classes.innerCircle1}></div>
      </div>
    </>
  );
};

• 円1つの場合のコードにハイライトした行を追加しています。
• 同心円を描く場合、内側の円の要素を一番外側の円の要素で囲みます。
• CSSの記述ではposition: "absolute"として上位の要素内での絶対位置を指定し、配置が重なるようにします。
• top: "50%"、left: "50%"、transform: "translate(-50%,-50%)"を使用して上位要素内での位置関係を調整し、同心円となるようにします。

円3つ以上の同心円

デモ

コード概要

src/App.tsx

import React from "react";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  outerCircle: {
    margin: "auto",
    width: "300px",
    height: "300px",
    position: "relative",
    border: "solid #4169e1 5px",
    "border-radius": "50%"
  },
  innerCircle1: {
    width: "250px",
    height: "250px",
    position: "absolute",
    border: "solid #4169e1 5px",
    "border-radius": "50%",
    top: "50%",
    left: "50%",
    transform: "translate(-50%,-50%)"
  },
  innerCircle2: {
    width: "200px",
    height: "200px",
    position: "absolute",
    border: "solid #4169e1 5px",
    "border-radius": "50%",
    top: "50%",
    left: "50%",
    transform: "translate(-50%,-50%)"
  },
  innerCircle3: {
    width: "150px",
    height: "150px",
    position: "absolute",
    border: "solid #4169e1 5px",
    "border-radius": "50%",
    top: "50%",
    left: "50%",
    transform: "translate(-50%,-50%)"
  },
  innerCircle4: {
    width: "100px",
    height: "100px",
    position: "absolute",
    border: "solid #4169e1 5px",
    "border-radius": "50%",
    top: "50%",
    left: "50%",
    transform: "translate(-50%,-50%)"
  },
  innerCircle5: {
    width: "50px",
    height: "50px",
    position: "absolute",
    border: "solid #4169e1 5px",
    "border-radius": "50%",
    top: "50%",
    left: "50%",
    transform: "translate(-50%,-50%)"
  }
});

export const App: React.FC = () => {
  const classes = useStyles();

  return (
    <>
      <div className={classes.outerCircle}>
        <div className={classes.innerCircle1}></div>
        <div className={classes.innerCircle2}></div>
        <div className={classes.innerCircle3}></div>
        <div className={classes.innerCircle4}></div>
        <div className={classes.innerCircle5}></div>
      </div>
    </>
  );
};

• 円2つの同心円の場合のコードにハイライトした行を追加しています。
• 3つ以上の円の同心円を描きたい場合は、一番外の円の要素内に内側の円の要素を同じ階層で並べます。

おわりに

@material-ui/styles（CSS in JS）を使って同心円を書いてみました。

アプリケーションのフロントエンドにデザインを適用するためにCSSを今までになくがっつり触っていますが、様々な表現を描くことができとても今更ながら可能性を感じています。

参考

• CSS | 二重丸（Double circle）の作り方 | ONE NOTES
• CSSで円を描く方法：文字を中央配置するには？枠線のつけ方は？
• translate() - CSS: カスケーディングスタイルシート | MDN

以上