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;
}
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> }
}