https://styled-components.com/releases
styled-components
styled-components 란 무엇일까요?
styled-coponents 는 자바스크립트의 태그가 지정된 템플릿 리터럴과 CSS 의 기능을 사용하여 구성 요소에 반응하는 스타일을 제공하는 CSS-in-JS 스타일링을 위한 프레임워크입니다.
Styled Components #1 Basic : 리액트 스타일 컴포넌트 기초
Styled Components #2 Advanced : 리액트 스타일 컴포넌트 심화
조건 부 사용 법
const StyledButton = styled.button`
padding: 0.375rem 0.75rem;
border-radius: 0.25rem;
font-size: 1rem;
line-height: 1.5;
border: 1px solid lightgray;
color: ${(props) => props.color || "gray"};
background: ${(props) => props.background || "white"};
`function Button({ children, color, background }) {
return (
<StyledButton color={color} background={background} Î>
{children}
</StyledButton>
)
}
<Button color="green" background="pink">
Green Button
</Button>
/////
const StyledButton = styled.button`
padding: 0.375rem 0.75rem;
border-radius: 0.25rem;
font-size: 1rem;
line-height: 1.5;
border: 1px solid lightgray;
${(props) =>
props.primary &&
css`
color: white;
background: navy;
border-color: navy;
`}
`
function Button({ children, ...props }) {
return <StyledButton {...props}>{children}</StyledButton>
}
<Button primary>Primary Button</Button>
사이드 메뉴에서 메뉴 클릭시 active 상태, hover 시 이미지 및 color 변경이 있었다.
가변적으로 변경해야해서 props를 전달하여 스타일링 하였다.
코드
export const GnbItem = styled.div`
& a::before {
display: inline-block;
content:"";
width: 16px;
height: 16px;
margin-right: 14px;
background-image:url(${props => props.pathname ? props.hover : props.img});
vertical-align:top;
}
&:hover a::before {
background-image:url(${props => props.hover});
}
& a{
color:${props => props.pathname ? "#36CFBD" : "#ccc"};
text-decoration: none;
}
&:hover a,
&:focus a{
color:#36CFBD;
}
`;
사이드 메뉴 클릭시 제목명도 바뀌어야하는데 바뀌지 않는다 ssr 이라서 그런 것 같다..
다른 방법을 생각해봐야겠다.