【styled-component】ReferenceError: styled is not definedと表示されたら

概要

下記のような記述をすると

styledをimportしているのに使用しないコンポーネント.tsx

import React, { FC } from "react";
import styled from "styled-components";

const Home: FC = () => {
    return (
        <div>
            <div css="margin-bottom: 18px;">hoge</div>
            <div css="margin-bottom: 18px;">hoge</div>
            <div css="margin-bottom: 18px;">hoge</div>
        </div>
    );
};

export default Home;

下記のようなエラーが表示されます

必要のないstyledのimport文が原因なので、こちらを削除します。

styledのimport文をコメントアウト.tsx

import React, { FC } from "react";
// import styled from "styled-components"; ←styledは使用していないので削除する

const Home: FC = () => {
    return (
        <div>
            <div css="margin-bottom: 18px;">hoge</div>
            <div css="margin-bottom: 18px;">hoge</div>
            <div css="margin-bottom: 18px;">hoge</div>
        </div>
    );
};

export default Home;

正常に表示されました。

補足

なお、styledを使用している際には該当のエラーが表示されません。

styledを使用した場合.tsx

import React, { FC } from "react";
import styled from "styled-components";

const Home: FC = () => {
    return (
        <div>
            <Hoge>hoge</Hoge>
            <Hoge>hoge</Hoge>
	    <Hoge>hoge</Hoge>
        </div>
    );
};

const Hoge = styled.div`
	margin-bottom: 18px;
`

export default Home;

原因が不明のため少し詰まったため、メモとして残しておきます。