[styled-component] Reference Error:styled is not defined로 표시되면

개요

다음
styled를 사용할 때 사용하지 않는 구성 요소입니다.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;

다음 오류 표시

필요한 스타일드의 import문이 없기 때문에 여기를 삭제합니다.
스타일드의 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를 사용할 때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;

원인이 불분명해서 조금 막혀서 메모로 남겼어요.