홈>2020-02-01 01:30

javascript - 스타일링 된 컴포넌트/반응

확장하려는 간단한 버튼 예제를 작성 중입니다. 새 버튼을 추가하고 일부 상수도 포함했습니다. 여태까지는 그런대로 잘됐다. 버전 1, 버전 2, 같은 버튼의 버전 3과 같은 더 많은 버튼 버전을 사용하려는 경우 배경 색상과 같은 일부 스타일이 변경되었습니다. 어떻게해야합니까? 어떻게 내 보내야합니까?

const PrimaryButton = styled.button`
  font: inherit;
  padding: 0.5em 1em;
  border: 1px solid;
  background-color: ${buttonBackgroundColor};
  color: ${buttonColor};
  border-radius: 0.25em;
  border-color: ${colors.blueLight};
  margin-right: 0.5em;
  cursor: pointer;
  outline:none;
  :hover {
    background-color: ${colors.blueLight};
  }
`;

버튼을 확장 할 수 있습니까 (어떻게?) 또는 각 버튼마다 다른 구성 요소를 추가하는 것이 더 합리적입니까? 타이포그래피를 위해 "extend"를 사용했습니다. 작동합니다. 다른 버튼 버전에 대해서는 어떻습니까? 비슷한 방법이 있습니까?

export const H1 = styled.h1`
  font-size: 30px;
  color: red;
`
export const H2 = H1.withComponent('h2').extend`
  font-size: 24px;
`

javascriptcssreactjsstyled-components

답변 # 1
새 컴포넌트를 추가 할 때 작동했습니다. PrimaryButton을 "Version2"라는 새로운 정의 된 구성 요소로 가져 왔습니다.
```
import PrimaryButton from './primary';
```
여기에서 나는 다음과 같이 PrimaryButton을 업데이트했다 :
```
const Version2 = PrimaryButton.extend`background-color: red;`
```
이것은 버튼의 마스터 구성 요소가 있다는 이점이 있습니다. 이제 다양한 추가 스타일로 마스터를 확장 할 수 있습니다. 제 경우에는 배경색입니다.

의 도움으로
```
export default Version2;
```
이제 "Version2"라는이 버튼을 다음과 같이 렌더링 함수에 추가 할 수 있습니다 :
```
<PrimaryButton>ClickMe!</PrimaryButton>
<Version2>ClickMe!</Version2>
```
이제 다른 버튼을 얻습니다. 또한 매우 모듈 식이며 깨끗합니다.

Python2.net

javascript - 스타일링 된 컴포넌트/반응

관련 자료