@mui/material/stylesでhoverを書く

若干はまったのでメモ。

@mui/material/stylesでhoverやtransitionsを書こうとしたときにコンパイルエラーで弾かれまくったので、ここに書き方を記していきます。

実装方法

import * as React from 'react';
import { styled } from '@mui/material/styles';
import SendIcon from '@mui/icons-material/Send';
import LoadingButton from '@mui/lab/LoadingButton';
import { styled } from '@mui/material/styles';

const CustomButton = styled(LoadingButton)({
  backgroundColor: 'red',
  "&:hover": {
    backgroundColor: 'blue',
  },
});

export function Button = () => {

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

ホバー前

ホバーなう

参考