React_styled자식 연결

import Button from "./Button";

import styled from "styled-components";

const StyledH1 = styled.h1`

  color: red;

`;

export default function App(){

  return(

    <>

      <StyledH1>App</StyledH1>

      <Button>

        <ul>

          <li>A</li>

          <li>B</li>

        </ul>

      </Button>

    </>

  )

}

 

import styled from "styled-components"

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

const StyledButton = styled.button`

    color: blue;

    background-color: yellow;

    font-size: 16px

`;

export default function Button({children}){

return(

    <StyledButton>

        {children}

    </StyledButton>

)

}

 

 

 

마켓에서 설치해야 styled 백틱 안에 색이 나온다.