React_Styled_자식으로 색상 넘기기

import Button from "./Button";

import styled from "styled-components";

const StyledH1 = styled.h1`

  color: red;

`;

export default function App(){

  const text_color="purple";

  return(

    <>

      <StyledH1>App</StyledH1>

      <Button text_color={text_color}>

        <ul>

          <li>A</li>

          <li>B</li>

        </ul>

      </Button>

    </>

  )

}

 

import styled from "styled-components"

//1. html태그에 스타일 적용 ==> styled.태그명 ``형식

const StyledButton = styled.button`

    color: ${(props) => props.button_color || "blue"};

    background-color: yellow;

    font-size: 16px;

`;

export default function Button({children, text_color}){

return(

    <StyledButton button_color={text_color}>

        {children}

    </StyledButton>

)

}