Zenn
Open3

Material UIの調査

西川信行西川信行

バージョン5をインストール

npm install @mui/material @emotion/react @emotion/styled
西川信行西川信行

styled コンポーネントのような書き方。

import Button from "@mui/material/Button";
import { styled } from "@mui/material/styles";

const CustomButton = styled(Button)({
  backgroundColor: "red",
});

const Index: React.VFC = () => {
  return (
    <div className="mx-auto max-w-6xl px-6 mt-36">
      <CustomButton variant="contained">こんにちは</CustomButton>
    </div>
  );
};

export default Index;
西川信行西川信行

sxを使えば、ちょっとした変更が可能。

import Button from "@mui/material/Button";
import { styled } from "@mui/material/styles";

const CustomButton = styled(Button)({
  backgroundColor: "red",
});

const Index: React.VFC = () => {
  return (
    <div className="mx-auto max-w-6xl px-6 mt-36">
      <Button variant="contained" sx={{py: 10}}>Test</Button>
    </div>
  );
};

export default Index;