2017-12-24 6 views
0

Ich는 React 구성 요소 Knob을 가지고 있으며 CSS 그리드에 여러 번 배치하기 위해 다른 스타일을 전달하려고합니다. 부모 구성 요소는 Display: grid이 아이들이이 같은 스타일됩니다styled (Component) 스타일 값을 사용자 지정 구성 요소로 전달하지 않음

const Treble = styled(Knob)` 
    grid-column: 2; 
    grid-row: 1; 
`; 

const Mid = styled(Knob)` 
    grid-column: 2; 
    grid-row: 2; 
`; 
... 

을하지만 unfortunatelly 그리드 값은 노브 구성 요소에 계승되지 않습니다. 모눈 값을 손잡이 구성 요소의 최상위 컨테이너에 배치하면 (스타일 구성 요소의 스타일에도 영향을 미칩니다) 예상대로 작동합니다. 아무도 내가 여기서 잘못하고있는 것을 말해 줄 수 있습니까?

+0

은'''도움말'{... this.props}을 추가 하는가 : 그래서 난에 Knob의)합니다 (렌더링 변경? 이처럼 <노브 {... this.props} />'. – brkn

+0

아니요, 다시 문서를 읽고 클래스 이름을 전달해야합니다. 나는 그 첫 번째 팀을 올바르게 읽지 않았다;) 고마워, 그래! – Simons0n

답변

0

나는 단지 문서를 다시 읽고 클래스 이름을 하위 구성 요소의 부모 구성 요소로 전달해야한다는 것을 알아 냈습니다.

const {className} = this.props; 
<Container className={className}> 
    ... 
</Container> 
관련 문제