[TIL] 220420

styled-components

// styled components
const Input = styled.input`
  border: 1px solid #000;
`;
// Extending Styles
const InputDashed = styled(Input)`
  border-style: dashed;
`;
const InputRequired = styled(Input).attrs({
  required: true,
})`
  border-color: red;
`;
const InputCheckbox = styled.input.attrs({
  type: 'checkbox',
  checked: true,
})`
  width: 20px;
  height: 20px;
  vertical-align: middle;
`;

<Input />
<InputDashed />
<InputRequired />
<InputCheckbox />

<input class="dZavXw">
<input class="dZavXw jniHXW">
<input class="dZavXw bEOHQT" required>
<input type="checkbox" class="cmWwgz" checked>

Theme

global Theme | 기억보다 기록을

Styled Components

---

React - Styled Components 사용법

오버로드 (Overloads)

이름은 같지만 매개변수 타입과 반환 타입이 다른 여러 함수를 가질 수 있는것.