styled components - As, Attrs

오늘의 한마디

As

as을 사용하여 엘리먼트를 다른 엘리먼트로 교체할 수 있습니다.

const Button = styled.button`
`;

function App(){
	return(
      <>
    	<Button as="a" href="#">Link with Button styles</Button>
      </>
    )
}

Attrs

반복되는 태그들의 속성을 일일이 추가하지말고 한번에 속성값을 추가하는데 요긴하다.

const Input = styled.input.attrs({
	type: "password",
  	require: true
})`
	width: 100%
`

function App(){
	return(
      <>
    	<Input />
        <Input />
        <Input />
        <Input />
      </>
    )
}