흔히 reset.css
로 많이 사용했던 것 처럼 사용합니다.
import styled, {injectGlobal} from "styled-components";
를 추가해주면 사용할 수 있습니다.
injectGlobal`
body{
padding: 0;
margin: 0;
font: blah blah
}
`
여기 <Button/>
컴포넌트의 기본 스타일이 있습니다.
const Button = styled.button`
border-radius: 50px;
padding: 5px;
-webkit-appearance: none;
cursor: pointer;
&:active,
&:focus {
outline: none;
}
...
background-color: ${props => (props.danger? "#e74c3c" : "#2ecc71")};
`
<Anchor>
컴포넌트는 <Button/>
컴포넌트와 스타일과 같은데
단지 언더라인만 제거하는 css만 따로 추가하고 싶다면 extend
키워드를 기억하세요.
const Anchor = Button.withComponent("a").extend`
text-decoration: none;
`