커스텀 리액트 컴포넌트에 className을 설정할 수 있습니까?

커스텀 리액트 컴포넌트에 className을 설정할 수 있습니까?

이 질문에는 이미 답변이 있습니다.

className/onClick/onChange를 사용자 지정 리액트 구성 요소에서 적용하지 않음 (2개의 답변)

닫힘5년 전에요.

예를 들어 다음과 같은 단순한 컴포넌트가 있다고 합시다.

class SimpleComponent extends React.Component
{
    render() { return <p>Some text</p> }
}

추가가 가능합니까?className로.SimpleComponent아니면 HTML DOM 요소에만 한정되어 있습니까?

예를 들어 다음과 같습니다.

var mySimpleComponent = <SimpleComponent className="myComp"/>

이렇게 하는 이유는 커스텀컴포넌트 내의 요소를 다음과 같이 스타일링할 수 있도록 하기 위해서입니다.

.myComp > p {
    background-color: blue;
}

할 수 있지만 내부 컴포넌트에 소품을 전파해야 합니다.그렇지 않으면 알 수 없습니다.

class SimpleComponent extends React.Component
{
    render() { return <p className={this.props.className}>Some text</p> }
}

실행하는 CSS 쿼리를 작성하려면div컴포넌트 내부에 있습니다.

class SimpleComponent extends React.Component
{
    render() { return <div className={this.props.className}><p>Some text</p></div> }
}

언급URL : https://stackoverflow.com/questions/46040733/is-it-possible-to-set-a-classname-on-custom-react-components