💅

Next.jsでstyled-componentsを使ったときの話

2022/06/29に公開

CSS

モダンの技術使いたいよ!!!!

ペーペーの僕はそう思い,既存のLP案件に打ち込もう！と思い色々調べましたので書いていこうと思います。

とりあえずinstall

yarn add styled-components @types/styled-components
yarn add babel-plugin-styled-components

最近ではpnpmが早くて軽いらしいですね。。。知らんけど

ほんで.babelrc

.babelrcにこちらを追加してください

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", {"ssr": true}]]
}

とりあえずこれで動くはず！！！

動かなくても責任取りまへん。
nextJs Docs
styled-components Docs

componentsとは？

僕はペーペーです。なので僕がそう思っているだけですが,パーツとしての最小値で使いまわせるものだと考えています。

なのでcomponents拡張できた方がいいよね！？

ここでは一例としてボタンを作ってみます。
この記事を参考にさせていただいています

import styled from 'styled-components';

export const Button = (props) => {
  return (
    <>
      <StyledButton data-level={props.color}>{props.txt}</StyledButton>
    </>
  );
};

const StyledButton = styled.button`
  background: white;
  color: gray;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 3px solid gray;
  border-radius: 3px;

  &[data-level='red'] {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
  }
`;

&[data-level='red']は何かというと任意で決められるデータです &[data-colur='red']でも大丈夫です。
import先の<Button/>にデータ属性としてdata-levelをpropsで渡すとstyleを変更することができるようになります。
<Button color="red" txt="test" />
このような形でimportすると赤色のtest文字が入ったボタンが出力されます

ぶっちゃけめちゃめちゃ便利です

ぜひ自分でカスタムしていい感じに使ってください！！！！！！！

僕はわりかし作り込んだのですが会社から僕しか案件を触れる人がいなくなるからダメだと言われ泣く泣くお蔵入りしてしまいました。

終わり