React Js - styled components

React Js - styled components

1. 따로 css 파일을 만들지 않고 자바스크립트 안에서 css 사용이 가능함

2. 벡틱을 이용하여 css를 변수화 시켜서 태그로 사용함

3. css를 컴포넌트안에서만(local) 사용이 가능함

단, 익스에선 정상적으로 작동하지 않음

• 설치

   yarn add styled-components

• local 사용

  Header.js

   import React from "react";
   import styled from "styled-components";
   ​
   // 자바스크립트 방식의 페이지이동 (href 대신 to 사용)
   import { Link } from "react-router-dom"; 
   ​
   const List = styled.ul`
       display:flex;
       &:hover{
           background-color: blue;
       }
   `;
   ​
   const Header = styled.header``;
   ​
   const Item = styled.li``;
   ​
   const SLink = styled(Link)``;
   ​
   export default () => (
       <Header>
           <List>
               <Item>
                   <SLink to="/">Movies</SLink>
               </Item>
               <Item>
                   <SLink to="/tv">TV</SLink>
               </Item>
               <Item>
                   <SLink to="/search">Search</SLink>
               </Item>
           </List>
       </Header>
   )

• 
  

출처 : https://academy.nomadcoders.co/