Add style to third party libraries that didn't handle className correctly

[searene]

Suppose I have a third-party react component that looks like this.

export class CustomComponent extends Component {
  render() {
    return (
      <div className="custom">Test</div>
    );
  }
}

And I use it with styled-components like this.

const StyledCustomComponent = styled(CustomComponent)`
  color: green;
`

class App extends Component {
  render() {
    return (
      <StyledCustomComponent />
    );
  }
}

Of course it didn't work. To make it work, the third-party library has to pass this.props.className to className, like this:

export class CustomComponent extends Component {
  render() {
    return (
      <div className={this.props.className}>Test</div>
    );
  }
}

So I have to modify the library's source code to make it work, which I do not prefer.

Is there any way to make it work without modifying its source code? For example, reuse the existing className custom or injecting this.props.className into className by force?

By the way, this is the situation when I tried to add styles to react color, which only has a fixed className.

[k15a]

I think the best thing is to open an issue there and ask if they can forward the className. Otherwise I can't think of a solution for this problem other than wrapping the Component in another one and applying the styles to the custom class.

const StyledComponent = styled.div`
    background: blue;

    .custom {
         background: black;
    }
`

const App = () => (
    <StyledComponent>
         <div className="custom">Hello World</div>
    </StyledComponent>
)

[searene]

Thank you, this is the only solution I can think of too. I will see if there's anything React Color could do about it.