Closed3
StoryBook / styled-component
styled-componentsとStorybookの導入メモ
styled-componentの導入
styled-components: Basics
Next.jsにstyled-componentsを取り込む方法【Babelの設定が必要】
Next.jsで動いているので、この辺りを参考に。
yarn add styled-components
動作確認で背景を真っ黒にしてみる
pages/index.ts
import styled from "styled-components";
const Wrapper = styled.section`
background: black;
`;
const Home = (): JSX.Element => (
<Wrapper>
// ....
</Wrapper>
)
Babelの設定
SSRを利用しているので、サーバーサイドでstyled-componentが動くように設定が必要
.babelrc
{
"presets": [
"next/babel"
],
"plugins": [
[
"babel-plugin-styled-components",
{
"ssr": true,
"displayName": true,
}
],
"inline-react-svg" // SVGファイルを使うための設定
]
}
このスクラップは2022/06/05にクローズされました
作成者以外のコメントは許可されていません