styled-components 빠르게 하기(tsx 대응)

상용

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>
  );
}

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>
  );
}

유형(Type Script 시)

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

Code Sandbox