Closed3
StoryBook / styled-component
![marusho](https://res.cloudinary.com/zenn/image/fetch/s--teLBTxNG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/158e0af88c.jpeg)
styled-componentsとStorybookの導入メモ
![marusho](https://res.cloudinary.com/zenn/image/fetch/s--teLBTxNG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/158e0af88c.jpeg)
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にクローズされました