styled-components: injectGlobal과 재사용

poburi FE·2020년 7월 15일
0

React

목록 보기
7/10

injectGlobal

흔히 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;
`
profile
FE 개발자 poburi

0개의 댓글