Styled-components: Classname hash wont generate when styling component passed as a prop (React)

[james-prado]

I'm using react and styled-components to make a simple dialog component and I keep running into this weird issue where a component passed as a prop then styled by styled-components will render, but won't be styled (because the classname hash isn't generated).

Version

2.1.1

Reproduction

Repo

Steps to reproduce

• Pass a component as a prop to another component
• Use styled-components to style the passed component
• Render the new styled component

Expected Behavior

Expect to find the component passed as a prop rendered and styled with a classname hash from styled-components

Actual Behavior

The component passed as a prop is rendered, however there is no classname hash on the component to style it.

[k15a]

You need to pass the classname of styled-components down to the dom element.

const AddSystem = props => {
    return (
        <div className={props.className}>
            <h6>Dialog Box</h6>
            <button onClick={props.toggleDialog}>Close</button>
        </div>
    )
}