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

개요

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 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;

보태다

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;