Add className prop

[sami616]

Hi there i'm trying to add some styling to the div that is rendered using styled-components - but no className prop seems to be passed down to the underlying div.

[theKashey]

👍 legit case.

[theKashey]

The only problem - right now it would leave two divs, and you might need some class for both of them :(

• I could provide two classNames, but that's not good
• I could keep only one, but that's a breaking change
• I could think about it a little more...

[sami616]

The requirement for styled-components is that a className prop is accepted by the component and passed down to the outer element. It will merge any existing classes with a generated one.

https://www.styled-components.com/docs/basics#styling-any-component

So essentially you'd be able to do something like this:

const MyComp = styled(FocusOn)`
  background: white;
  .some-other-nested-div {
    // other styles
  }
`

[theKashey]

Ok. So I've got it working. Give me some time (cooldown period) to double-check is this is what I want to merge...

[theKashey]

3.2.0 for the rescue!