처음 접하였을때는 별 생각없이.. 음 리액트에서 css뭐 개발자가 편하게 쓸 수 있도록 제공해주나..
이 생각으로 접하게 되었다.
const Header = styled.div`
background:#000;
color: #fff;
`;
return <Header>Header</Header>이런식으로 내가 선언한 변수에 styled를 할당하여 사용하는 방식이며, styled.(태그)가 뒤에 어떤 태그를 사용할건지에 대해서 선언하면 된다.
위의 방식으로 브라우저에서 확인하게 되면, 아래 코드처럼 css의 속성은 head에 작성되어 있는 걸 확인할 수 있다.
<head>
.ilirGo{background:#000;color:#fff;}
</head>
...
<div class="sc-AxhCb ilirGo">가나다</div>위 내용은 기본적인 사용법이고, 내가 놀랐던 부분은
const Header = styled.div`
background:#000;
color: #fff;
`;
return <Header as="span">Header</Header>이렇게 as="(태그)" 사용할 태그명을 입력하게 되면 브라우저에서 내가 적어놓은 태그로 컴파일 되는데 브라우저에서 소스창을 보면 Div가 span으로 변한 것을 확인할 수 있었으며, 이렇게도 사용할 수 있도록 구현을 해 놓았다니 놀라웠다.
const Header = styled.div`
${({ margin }) => margin && ` margin:${margin};`}
background:#000;
color: #fff;
`;
return <Header margin="10px">Header</Header>inline으로 margin이 있을 경우에 css의 속성이 반영된다.
Mixin으로 사용하기
import styled, { css } from "styled-components";
const border = css`
${({ border }) => border && ` border:${border} solid #000;`}
`;
const Header = styled.div`
${({ margin }) => margin && ` margin:${margin};`}
background:#000;
color: #fff;
${border};
`;
const Header = styled.div`
${({ margin }) => margin && ` margin:${margin};`}
background:#000;
color: #fff;
`;
return <Header margin="10px" border="10px">Header</Header>코드를 보면 border를 선언하고 border를 Header에서 사용할 수 있다.
이 외에 createGlobalStyle이나, 상속받아 사용할 수도 있다.
하지만 과연 개발자가 css를 퍼블리셔만큼 사용할 수 있을지는 의문이다.
ksb