CRYPTO TRACKER - (3)Home part one

Apeachicetea·2021년 12월 9일
0

CRYPTO TRACKER

목록 보기
3/4

li a와 hover 효과 주기

import styled from "styled-components";
import { Link } from "react-router-dom";

function Coins() {
  const Coin = styled.li`
    background-color: white;
    color: ${props => props.theme.bgColor};
    
    margin-bottom: 10px;
    border-radius: 15px;
    a {
      transition: color 0.2s ease-in;
      display: block;
      //한 줄 전체가 클릭할 수 있는 영역으로 된다.
      padding: 20px;
    }
    &:hover {
      a {
        color: ${props => props.theme.accentColor};
      }
    }
  `;

  return (
    <Container>
      <Header>
        <Title>코인</Title>
      </Header>
      <CoinsList>
        { 
          coins.map((el)=>(
            <Coin key={el.id}>
              <Link to={`/${el.id}`}>{el.name} &rarr;</Link>
                                             //&rarr은 화살표 모양
            </Coin>)
          )
        }
      </CoinsList>
    </Container>
  )
}


profile
웹 프론트엔드 개발자

0개의 댓글