홈>
확장하려는 간단한 버튼 예제를 작성 중입니다. 새 버튼을 추가하고 일부 상수도 포함했습니다. 여태까지는 그런대로 잘됐다. 버전 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;
`
-
답변 # 1
관련 자료
- Typescript의 React 스타일 구성 요소에 Prop 전달
- reactjs - 로드되지 않은 스타일 구성 요소 - react typescript webpack 설정
- javascript - react native의 스타일 구성 요소 - 소품을받지 못함
- reactjs - React는 두 개의 다른 아이콘에 대해 하나의 스타일 구성 요소를 생성합니까?
- reactjs - React에서 재사용 가능한 구성 요소를 처리하는 방법은 무엇입니까?
- styling - 반응 부트 스트랩 구성 요소가 제대로 작동하지 않습니다
- reactjs - React Routers에 동적 페이지 라우팅 구성 요소를 중첩시키는 방법은 무엇입니까?
- reactjs - 빅 데이터 세트로 구성 요소 스 와이프 (반응)
- javascript - 반응시에만 하위 구성 요소를 렌더링하는 방법
- reactjs - 반응 클래스 컴포넌트와 기능 컴포넌트
- javascript - 반응 - 목록에서 구성 요소 순서 변경
- javascript - 하위 구성 요소에 대한 소품으로 onClick을 전달하는 반응이 있습니까?
- javascript - 스타일이 지정된 구성 요소에서 소품 조합 처리
- reactjs - 유사한 uri이지만 다른 구성 요소 - 라우터 v4 반응
- reactjs - 소품을 React Big Calendar 사용자 컴포넌트에 전달하는 방법은 무엇입니까?
- reactjs - 상위 구성 요소 구문 구문
- javascript - 반응에서 고차 구성 요소의 문제
- javascript - React Router 4/5에서 래핑 구성 요소를 조건부로 렌더링하는 방법
- reactjs - React에서 클래스 구성 요소를 기능 구성 요소의 자식으로 사용할 수 있습니까?
- javascript - props/data를 'plain'HTML에 내장 된 React 컴포넌트로 전달할 수 있습니까?
관련 질문
- javascript - React 17을 webpack 5 및 babel-plugin-react-css-modules (스타일 이름이있는 css 모듈)와 통합
- javascript - BorderBottom이 뷰 상단에 React Native를 추가했습니다
- javascript - 호버링 된 링크의 커서 손이 "커서 - 없음"으로 사라지지 않습니다
- html 및 javascript를 사용하여 복사 버튼을 만드는 방법은 무엇입니까?
- html - 고정 탐색 모음 - z- 색인 설정 후 콘텐츠를 클릭 할 수 없음
- css - React Native Flex 스타일링 문제
- javascript - 마우스를 가져 가면 카드의 이미지를 변경할 수 있습니다 하지만 이미지가 다른 많은 카드에 대해 어떻게해야합니까?
- css - 모달 콘텐츠 외부를 클릭하는 경우에만 오버레이를 닫습니다
- javascript - 동적 객체 (Nextjs) 내에 저장된 JSX 매핑 배열
- javascript - useState가 객체 배열에서 작동하지 않습니다
새 컴포넌트를 추가 할 때 작동했습니다. PrimaryButton을 "Version2"라는 새로운 정의 된 구성 요소로 가져 왔습니다.
여기에서 나는 다음과 같이 PrimaryButton을 업데이트했다 :
이것은 버튼의 마스터 구성 요소가 있다는 이점이 있습니다. 이제 다양한 추가 스타일로 마스터를 확장 할 수 있습니다. 제 경우에는 배경색입니다.
의 도움으로
이제 "Version2"라는이 버튼을 다음과 같이 렌더링 함수에 추가 할 수 있습니다 :
이제 다른 버튼을 얻습니다. 또한 매우 모듈 식이며 깨끗합니다.