【React】styled-componentsでpropsを使う時の書き方大全

styled-componentsでpropsを使って動的にスタイルを変えたい時に、いろいろな書き方ができます。
意外とまとまったリファレンスがなかったので、今回は私が仕事でよく使う・見かける書き方をまとめてみました。

https://styled-components.com/

環境

• React 18.0.0
• TypeScript 4.6.3
• styled-components 5.3.5

props.XXX

App.tsx

import styled from "styled-components";

function App() {
  return (
    <Container background={"red"} isActive={true}>
      スタイルドコンポーネント
    </Container>
  );
}

const Container = styled.div<{ background: string; isActive: boolean }>`
  ${(props) => `background: ${props.background}`};
  ${(props) => props.isActive && `background: red; color: blue; width: 100px`};
  background: ${(props) => props.background};
  background: ${(props) => `${props.background}`};
  background: ${(props) => (props.isActive ? props.background : "")};
  background: ${(props) => (props.isActive ? `${props.background}` : "")};
  background: ${(props) => props.isActive && props.background};
  background: ${(props) => props.isActive && `${props.background}`};
`;

export default App;

分割代入 (Destructuring assignment)

毎回propsを書かなくてよくなるので、私は基本的に分割代入を使っています。

App.tsx

import styled from "styled-components";

function App() {
  return (
    <Container background={"red"} isActive={true}>
      スタイルドコンポーネント
    </Container>
  );
}

const Container = styled.div<{ background: string; isActive: boolean }>`
  ${({ background }) => `background: ${background}`};
  ${({ isActive }) => isActive && `background: red; color: blue; width: 100px`};
  background: ${({ background }) => background};
  background: ${({ background }) => `${background}`};
  background: ${({ background, isActive }) => (isActive ? background : "")};
  background: ${({ background, isActive }) => isActive ? `${background}` : ""};
  background: ${({ background, isActive }) => isActive && background};
  background: ${({ background, isActive }) => isActive && `${background}`};
`;

export default App;

さいごに

以上になります。
他にも書き方があればコメントいただけると幸いです。