#3 styled component

📍styled component란?

자바스크립트 안에 css를 사용할 수 있게 해줌 

 

1) 설치방법

 

# npm

>npm install styled-components --save 

*오류시

npm install styled-components@latest

#yarn

yarn add styled-components

 

2) 사용법

import styled from "styled-components";

....

const NavWrapper = styled.nav`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 70px;
  background-color: ${(props) => (props.show ? "#090b13" : "transparent")};
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 36px;
  letter-spacing: 16px;
  z-index: 3;
`;

 

- import 해주기

- 선언부분 변수 대문자  NavWrapper 

-  styled.nav   // styled.xx (태그명) 

- `` 이용해서 안에 css 담기 

 

 

사용할 부분에

 <NavWrapper show={show}> //usestate이용한  show가 true이거나false
      <Logo>
        <img
          alt="Disney Plus Logo"
          src="/images/logo.svg"
          onClick={() => (window.location.href = "/")}
        />
      </Logo>
    </NavWrapper>

 

 

 

3 ) CSS 선택자를 사용하여 스타일링하기

const Logo = styled.div`
  position: absolute;
  top: 10%;

  img {
    width: 70%; /* 부모 요소의 너비에 맞게 조정 */
    max-width: 300px; /* 최대 너비 설정 */
    height: auto; /* 비율 유지 */
  }
`;

4) 상속 받기

 

  background-color: ${(props) => (props.show ? "#090b13" : "transparent")};  

props으로 받은 show가 트루일때는 "#090b13" , 아닐 때는 "transparent"

 

 

예

4) ${  } 뜻

${다른 스타일 컴포넌트} : styled-components에서 다른 스타일드 컴포넌트를 참조하는 방법 중 하나

 

 

예시

const Indicator = styled.div`
  width: 30px; // 막대 길이 조정
  height: 6px; // 막대 높이 조정
  border-radius: 3px;
  background: ${({ active }) => (active ? '#3b82f6' : '#e0e0e0')}; // 현재 페이지에 따라 색상 변경
  margin: 0 5px;
  transition: background 0.3s;

  // 현재 페이지에 따라 모양 변경
  ${({ active }) => active && `
    width: 40px; // 현재 페이지 점의 길이
    background: #3b82f6; // 강조 색상
  `}
`;

1. 활성화된 인디케이터:
   • ${({ active }) => active && ...}: active prop이 true일 때만 적용되는 추가 스타일을 정의합니다. 이 경우, 인디케이터의 너비를 40픽셀로 늘리고 배경색을 강조 색상으로 변경합니다.

•