Passing in class names to react components
Just for the reference, for stateless components:
// ParentComponent.js
import React from 'react';
import { ChildComponent } from '../child/ChildComponent';
export const ParentComponent = () =>
<div className="parent-component">
<ChildComponent className="parent-component__child">
...
</ChildComponent>
</div>
// ChildComponent.js
import React from 'react';
export const ChildComponent = ({ className, children }) =>
<div className={`some-css-className ${className}`}>
{children}
</div>
Will render:
<div class="parent-component">
<div class="some-css-className parent-component__child">
...
</div>
</div>
In React, when you want to pass an interpreted expression, you have to open a pair of curly braces. Try:
render () {
return (
<button className={`pill ${ this.props.styleName }`}>
{this.props.children}
</button>
);
}
Using the classnames npm package
import classnames from 'classnames';
render() {
return (
<button className={classnames('pill', this.props.styleName)}>
{this.props.children}
</button>
);
}