스타일 컴포넌트와 리액트 부트스트랩?

스타일 컴포넌트와 리액트 부트스트랩?

리액트 부트스트랩과 함께 스타일 컴포넌트를 사용하는 방법이 있습니까?리액트 부트스트랩 노출bsClass대신 속성className스타일 구성 요소와 호환되지 않는 것으로 보이는 구성 요소의 경우.

경험이 있나요?

부트스트랩에서 컴포넌트의 원래 스타일을 유지하면서 스타일을 확장할 수 있습니다.스타일드 컴포넌트와 함께 리액트 부트스트랩과 같은 서드파티 라이브러리를 사용하는 방법에 대한 자세한 내용은 여기를 참조하십시오.

const StyledButton = styled(Button)`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

여기 참조용 샌드박스가 있습니다.https://codesandbox.io/s/2vpm40qk90

저는 더 나은 대안과 접근법을 제안하고 싶습니다.

이전에 리액트 부트스트랩을 사용한 적이 있습니다만, 현재의 실장에서는 부트스트랩을 완전히 리액트로 포팅하고 있지 않고, CSS/Fonts등의 외부 파일에 의존할 필요가 있는 것을 알 수 있었습니다.이것은 컴포넌트의 이념이나 베스트 프랙티스가 아닙니다.

스타일링 컴포넌트가 css 인터페이스를 제공하는 것을 고려하여 부트스트랩 4를 베스트 ES6 프랙티스와 함께 부트스트랩 스타일링이라는 프로젝트에서 포팅했습니다.

이 Twitter Bootstrap v4의 부트스트랩 실장은 CSS나 추가 파일을 1회 사용하지 않고 스타일링된 컴포넌트용으로 완전히 구현되어 있습니다.

이를 통해 완전한 js api, 주제화, 모듈화 및 재사용성으로 시작하는 몇 가지 이점을 얻을 수 있습니다.

스타일을 재정의하려면<ThemeProvider />또는 사용props.theme모든 컴포넌트에서 사용할 수 있습니다.다음 컴포넌트도 내보냅니다.<ThemeProvider />다음과 같은 부트스트랩 클래스 유틸리티를 제공합니다..d-none등...범위 안에서요.

데모를 보실 수 있습니다.

언급URL : https://stackoverflow.com/questions/45895416/styled-components-and-react-bootstrap