본문 바로가기
리액트/리덕스

styled component

by 픠버 2022. 12. 23.

styled-components 패키지에서 styled 함수를 임포트 한다

styled는 Styled Components의 근간이 되는 가장 중요한 녀석인데요. HTML 엘리먼트나 React 컴포넌트에 원하는 스타일을 적용하기 위해서 사용된다.

기본 문법은 HTML 엘리먼트나 React 컴포넌트 중 어떤 것을 스타일링 하느냐에 따라 살짝 다르다.

 

export const StyledSaveDuckHome = styled.div`
border-bottom: 2px solid black;
padding-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
position: relative;
`;

 

export const SaveDuckHomeNav = styled(NavLink)`
text-decoration: none;
color: black;
display: flex;
align-items: center;
`;

 

export const DuckImageLogo = styled.img`
display: flex;
align-items: center;
 
대충 이런형태로 

styled component를 준다 .

 

나는 아직 익숙하지 않아 너무 힘들다 

'리액트 > 리덕스' 카테고리의 다른 글

Redux  (0) 2023.01.03
Redux Toolkit  (0) 2022.12.24
리덕스  (0) 2022.12.21
리덕스  (0) 2022.12.20
Redux  (0) 2022.12.17