📘
【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;
原因が不明のため少し詰まったため、メモとして残しておきます。
Discussion