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} →</Link>
</Coin>)
)
}
</CoinsList>
</Container>
)
}