【React】Uncaught ReferenceError: styled is not definedの対処法

症状

styledでいろいろいじっていたら、以下のエラーが発生しました。 翻訳すると「参照エラー: スタイルが定義されていません」でした。

error

Uncaught ReferenceError: styled is not defined

以下がソースです。

MaterialUISaveButton

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

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 SaveButton({ onClick, btnLabel }) {
  const classes = useStyles();
  const [loading, setLoading] = useState(false);

  function handleClick() {
    setLoading(true);
    onClick();
    setTimeout(function () {
      setLoading(false);
    }.bind(this), 5000);
  }

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

解決方法

importにstyledがなかったため、定義されないと怒られていたようです。 上のソースにimportを追加したら、解決しました。

MaterialUISaveButton

import styled from "styled-components";

以下の記事では、importを消すと書いてあったのですが、別の事例だったので

参考