styled-componentsをさくっとやる（tsx対応）

好きなわりに使いこなせていないStyledComponentsで困ったので,さっとした紹介がてら書く.

普通に使う

import styled from "styled-components";

const StyledComponent = styled.div`
  width: 300px;
  height: 100px;
  background-color: skyblue;
  padding: 12px;
  margin: 8px;
`;

export default function Box() {
  return (
    <StyledComponent>
      <p>styled-componentsで装飾</p>
    </StyledComponent>
  );
}

<StyledComponent>で囲まれたスコープでのみCSSが適応される.つおい.

propsによってスタイルを変化

import React, { useState } from "react";
import styled from "styled-components";

const StyledComponent = styled.div`
  width: 300px;
  height: 100px;
  padding: 12px;
  margin: 8px;
  background-color: ${({ isRed }) => (isRed ? "tomato" : "skyblue")};
  /* これでもOK */
  /* background-color: ${(props) => (props.isRed ? "tomato" : "skyblue")}; */
`;

export default function ChangeBox() {
  const [isRed, setIsRed] = useState(false);
  return (
    <StyledComponent isRed={isRed}>
      <p>styled-componentsで可変に装飾</p>
      <button onClick={() => setIsRed(!isRed)}>色を変化</button>
    </StyledComponent>
  );
}

<StyledComponent>はpropsを受け取ることができ,CSSの条件文きなどに使える.これつおい.

型付け（TypeScriptの場合）

propsを受け取ると型付けが必要になってくるので,その書き方.（これに困った）

const StyledComponent = styled.div<{isRed:boolean}>`
`

型はstyled.divのあとなので注意！

Code Sandbox

今回はさっくり書きましたが,いつか完全攻略記事を書きたい.