Styled-components - (3)기본속성 설정 및 태그 변경하기

스타일 속성은 유지하면서 태그를 바꿔주고 싶을때

as="바꿔주고 싶은 태그명"

• 예시

import styled from "styled-components";

const Father = styled.div`
  display: flex;
`;

const Btn = styled.button`
  color: white;
  background-color: tomato;
  border: 0;
  border-radius: 15px;
`;

function App() {
  return (
    <Father as="header">
    //div -> header 태그로 변경
      <Btn as="a" href="/">Log In!</Btn>
    //button -> a 태그로 변경
    </Father>
  );
}

export default App;

기본 속성값 설정해주기

• 예시

import styled from "styled-components";

const Father = styled.div`
  display: flex;
`;

const Input = styled.input.attrs({ required: true })`
`;

function App() {
  return (
    <Father as="header">
      <Input></Input>
      <Input></Input>
      <Input></Input>
      <Input></Input>
      <Input></Input>
    </Father>
  );
}

export default App;

input태그에 required 속성이 다 들어가있는것을 확인할 수 있다.