Supply css class to 3rd party lib without using the name "className"

Environment

System:

• OS: macOS High Sierra 10.13.6
• CPU: x64 Intel® Core™ i7-4770HQ CPU @ 2.20GHz
• Memory: 167.45 MB / 16.00 GB
• Shell: 3.2.57 - /bin/bash

Binaries:

• Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node
• Yarn: 1.10.1 - ~/.nvm/versions/node/v8.11.3/bin/yarn
• npm: 6.4.1 - ~/.nvm/versions/node/v8.11.3/bin/npm

npmPackages:

• styled-components: ^3.4.9 => 3.4.9

Preparation

Create an app with create-react-app,

Change the App.js to this:

import React, { Component } from "react";
import "./App.css";
import styled from "styled-components";

const MyPart = ({ pClassName }) => (
  <p className={pClassName}>this is the P tag</p>
);

const StyledMyPart = styled(MyPart).attrs({
  pClassName: "for-p-tag"
})`
  &.for-p-tag {
    font-size: 60px;
  }
`;

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <StyledMyPart />
        </header>
      </div>
    );
  }
}

export default App;

Steps to reproduce

1. Run the app, expect the P tag to be displayed as 60px, but it’s not.
2. Change the code to this:

const MyPart = ({ className }) => (
  <p className={className}>this is the P tag</p>
);

const StyledMyPart = styled(MyPart).attrs({
  className: "for-p-tag"
})`
  &.for-p-tag {
    font-size: 601px;
  }
`;

1. Run the app, now it works.

What is the problem

How to make the styling work when the prop name is not className?

About it

Asked this previously on Stackoverflow.com without any luck. https://stackoverflow.com/questions/52378924/use-styled-components-to-supply-a-css-class/52441187#52441187

If the name of the prop is not className, it won’t work.

Don’t know if I did anything wrong, but I tried many ways. Is this just not supported or I miss something? Thanks.

[joewood]

I’m not sure why your above example doesn’t work:

const StyledDatePicker = styled(DatePicker)`
    .my-calendar {
        color: black;
    }
`;

<StyledDatePicker
   calendarClassName="my-calendar"
/>

The same approach works in this trivial example: https://codesandbox.io/s/q3zp4v70m9. You should be able to default the prop too, to make it simpler:

const StyledDatePicker = styled(DatePicker).attrs({
    calendarClassName:"my-calendar"
})`{
    color:blue;
   }
    .my-calendar {
        color: black;
    }`;

<StyledDatePicker/>

[naorye]

Is this fixed? I am using react-bootstrap and barely can integrate styled-components wince class names are not appended.