ReactでMUIを拡張した独自コンポーネントを作成

npm install @mui/material @emotion/react @emotion/styled

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

export default function CustomButton() {

  return (
    <Button variant="outlined" color="error">
      Error
    </Button>
  );
};

import React from 'react';
import './App.css';
import CustomButton from './CustomButton';

function App() {
  return (
    <div className="App">
      <CustomButton />
    </div>
  );
}

export default App;

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

// 呼び出し時に渡すデータを定義
type Props = {
  hasStyle: boolean
}

// 引数にPropsを定義
export default function CustomButton(props: Props) {
  // 独自スタイルを定義
  const style = {
    margin: '10px',
    fontWeight: 'bold',
    backgroundColor: 'red',
    color: 'white',
    '&:hover': {
      backgroundColor: 'red',
      color: 'white',
      opacity: 0.7,
    },
  };

  return (
    // sxプロパティを呼び出すときによって、デザインの適用有無を設定
    <Button sx={props.hasStyle ? style : null} variant="outlined" color="error">
    // デザインが固定の場合
    // <Button sx={style} variant="outlined" color="error">
      Error
    </Button>
  );
};

import React from 'react';
import './App.css';
import CustomButton from './CustomButton';

function App() {
  return (
    <div className="App">
      <CustomButton hasStyle={true} />
    </div>
  );
}

export default App;

import { TextField } from "@mui/material";

type Props = {
  /** 最大化有無 */
  fullWidth?: boolean
  /** ラベル */
  label: string
  /** 値 */
  value: string
  /** 値変更時の処理 */
  setValue: (val: string) => void
  /** 補助用テキスト */
  helperText?: string
}

export default function CustomTextField(props: Props) {
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    props.setValue(event.target.value);
  };

  return (
    <TextField
      fullWidth={props.fullWidth}
      label={props.label}
      value={props.value}
      onChange={handleChange}
      helperText={props.helperText}
    />
  )
}