Closed
Description
We want to use HOCs which sent down some classnames like so:
The styleName in withWarning.js resolves from loader to a class name which will be passed down. Here assume the resolved className is withWarning__warning__er3432
// withWarning.js
import 'styles.scss'; // has inside a class .warning
export default Component => ({warning, ...props}) => {
let styleNames = '';
if (warning) {
styleNames = 'warning';
}
return <Component {...props} styleName={styleNames}/>;
};At prettyText.js the styleName resolves as prettyText__pretty__ty3342. At the same time the component received as a property className which previously resolved withWarning__warning__er3432. Instead of merging these two classes on the final outcome, only the resolved from styleName is being used and the className from props never gets concatenated unless someone would explicitly declare the className on JSX <div {...props} className={props.className} styleName='pretty' />.
// /prettyText.js
import withWarning from './withWarning';
import 'styles.scss'; // has inside a class .pretty
const Text = props => {
return <div {...props} styleName='pretty' />;
};
export default withWarning(Text);Ending up with something like so:
// index.js
import TextWithWarning from './text.js';
ReactDOM.render(<TextWithWarning warning>Error</TextWithWarning>);
// Expected: <div class='withWarning__warning__er3432 prettyText__pretty__ty3342'>Error</div>
// Got: <div class='prettyText__pretty__ty3342'>Error</div>