React
[React] styled-components 사용 시 클래스 사용
먹세
2023. 3. 22. 10:56
styled-components
/* style.js */
export const PageWrap = styled.div.attrs(props => ({}))`
color: #1a1a1a;
background-color: #ffec9e;
`;
/* index.js */
import * as Styles from '../styles';
<Styles.PageWrap>
내용~~~~
</Styles.PageWrap>
위 형식처럼 style.js 를 import 후 Style. 이후에 export 정의한 스타일명으로 사용 가능하다.
그런데 위 처럼 사용할 때, 여러 페이지에 PageWrap 처럼 동일한 스타일을 적용하면서
일부만 다르게 적용하고 싶을 때는 아래처럼 사용 가능.
/* style.js */
export const PageWrap = styled.div.attrs(props => ({}))`
color: #1a1a1a;
background-color: #ffec9e;
&.page-1 {
background-color: red;
}
&.page-2 {
background-color: blue;
}
`;
/* page1/index.js */
import * as Styles from '../styles';
<Styles.PageWrap className="page-1">
내용~~~~
</Styles.PageWrap>
/* page2/index.js */
import * as Styles from '../styles';
<Styles.PageWrap className="page-2">
내용~~~~
</Styles.PageWrap>
위 처럼 각 페이지에 className으로 class 를 적용 가능.
css 하위태그 적용 방법
/* style.js */
export const PageWrap = styled.div.attrs(props => ({}))`
color: #1a1a1a;
background-color: #ffec9e;
// 기존 css 문법과 동일하게 &뒤에 한칸 띄고 사용하면 하위태그 지정 가능
& .page-1 {
background-color: red;
}
& .page-2 {
background-color: blue;
}
`;
/* page1/index.js */
import * as Styles from '../styles';
<Styles.PageWrap>
<Style.Content className="page-1"> 내용~~ </Style.Content>
</Styles.PageWrap>
반응형