【MUI】LoadingButtonの色を変える方法【styled-components】

LoadingButtonの色を変える方法

沼にはまったので、メモ。

LoadingButtonのcolorに直接色を指定しても、うまく変化せずThemeProviderとかを調べましたが、あまりうまくいかず最終的にstyled-componentsで色を付けるという原始的な方法で解決したので、ここに記録します。

解決方法

LoadingButton.js

import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import SendIcon from '@mui/icons-material/Send';
import LoadingButton from '@mui/lab/LoadingButton';
import { COLORS } from "../style_constants";
import { styled } from '@mui/material/styles';

const useStyles = makeStyles((theme) => ({
  button: {
    margin: theme.spacing(1),
  },
}));

const CustomButton = styled(LoadingButton)({
  backgroundColor: COLORS.MAIN_COLOR,
  opacity: 0.9,
  "&:hover": {
    backgroundColor: COLORS.MAIN_COLOR,
    opacity: 1,
  },
});

export function LoadingButton({ onClick, btnLabel }) {
  const classes = useStyles();
  const [loading, setLoading] = useState(false);

  function handleClick() {
    setLoading(true);
    onClick();
  }

  return (
    <div>
      <CustomButton
        size="large"
        variant="contained"
        color="primary"
        onClick={handleClick}
        loading={loading}
        loadingPosition="end"
        endIcon={<SendIcon />}
        className={classes.button}
      >
        {btnLabel}
      </CustomButton>
    </div>
  )
}

結果(デフォルトの色以外の色に変更できた)

参考