Styled component의 theme 활용 팁
styled component의 theme provider 기능을 활용하면 특정 variable에 css값을 할당해놓고 추후에 변경사항이 있으면 프로젝트 내부에서 일괄적으로 변경 가능하다.
import { ThemeProvider } from 'styled-components';
import {Button} from "antd"
const theme = {
mainColor: "mediumseagreen"
};
render(
<div>
<Button>Normal</Button>
<ThemeProvider theme={theme}>
<StyledButton>Theme</StyledButton>
</ThemeProvider>
</div>
);
const StyledButton = Styled(Button)(({theme})=>{
return{
["&&"]:{
background: theme.mainColor
}
}
})
기존에 nextjs 세팅하기에서도 설명했었다. 위의 mainColor만 바꾸면 유용하게 색깔을 바꿀수있다.
여기에서 3가지 팁을 공유하겠다.
첫째로는 antd의 설정된 css를 오버라이딩하는 방법이다. "&"를 이용해서 class를 추가해서 css 적용 우선순위를 높이는 방법이다. 예를들어 버튼의 기본 background색깔이 있다면 이를 이기고 내가 원하는 생깔로 커스터마이징하려면 !important를 써야하는데 이것보다는 Class를 '&'를 이용해서 추가해서 css적용 우선순위를 높이는게 낫다.
둘째로는 일반적으로 리터럴보단 functional한 styled component를 활용이다. 지금 회사에선 theme활용을 더 간편하게 하기위해서 functional로 styled component를 활용하고 있다.
const Button = styled.button`
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border-radius: 3px;
/* Color the border and text with theme.main */
color: ${props => props.theme.main};
border: 2px solid ${props => props.theme.main};
`;
위의 예는 리터럴로 정의한 Button이다.
const Button = styled.button(({theme})=>{
return {
fontSize: 1em,
margin: 1em,
padding: "0.25em 1em",
borderRadius: 3,
/* Color the border and text with theme.main */
color: theme.main,
border: `2px solid ${theme.main}`
}
}
`;
위의 예가 functional 로 정의된 버튼이다. 기존 props로 따로 받는 부분이 없어서 좀 더 간단하게 theme를 활용할 수 있다.
셋째로는 theme를 useTheme를 활용해서 컴포넌트 함수 내부에서도 활용하는 것이다.
에를 들어 css property를 프롭스로 내려야하는데 이때 theme내부의 값을 활용하고싶다?
import { useTheme } from 'styled-components'
const theme = useTheme()
<CustomButton color={theme.primaryColor}>
이렇게 활용하면 된다. 이 부분은 styedcomponent 심화(https://styled-components.com/docs/advanced)에 나와있다.
Author And Source
이 문제에 관하여(Styled component의 theme 활용 팁), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@greyzero/Styled-component의-theme-활용-및-모바일-최적화저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)