Is it possible to set a className on custom react components?

JavascriptReactjs

Javascript Problem Overview


Let's say I have a simple component like this:

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

Is it possible to add a className to SimpleComponent or is this constrained to HTML DOM elements only?

For example:

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

The reason I would like to do this is so that I can style the elements inside my custom component like this:

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

Javascript Solutions


Solution 1 - Javascript

You can, but you should propagate the prop to the inner component. If not, it doesn't know about it.

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

To make the CSS query you want to accomplish, then you should create the div inside your component.

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionsookieView Question on Stackoverflow
Solution 1 - JavascriptjorgonorView Answer on Stackoverflow