Open2022/12/09にコメント追加2

MUIでCheckBoxを押すと要素が出現する機能を実装

実装方針

MUIの標準でボタンcheckboxのようなものがなかったので、カスタマイズして作成してみた。

Checkbox.tsx

import { Box, Checkbox, Typography } from "@mui/material";
import { useState } from "react";

function CheckBox() {
  const [checked, setchecked] = useState(false);
  const handleChange = () => {
    setchecked((preChecked) => !preChecked);
  };
  return (
    <div>
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          borderRadius: "4px",
          border: `${checked ? "blue 2px solid" : "black 1px solid"}`,
        }}
        onClick={handleChange}
      >
        <Checkbox checked={checked}></Checkbox>
        <Typography>Hogehoge</Typography>
      </Box>
      {checked && <Typography>hoge</Typography>}
    </div>
  );
}

export default CheckBox;

実装としては、checked stateをコンポーネントで管理して、checked=trueの時にCSSを変えたり要素を表示させたりしている。
FYI

k_yas

FormGroupでも実装できそう