`className` does not work as expected

[garethbjohnson]

Bug Report

Prerequisites

• [x] Can you reproduce the problem in a MWE?
• [x] Are you running the latest version?
• [x] Did you check the FAQs to see if that helps you?
• [x] Are you reporting to the correct repository?
• [x] Did you perform a search in the issues?

Versions

1.1.1

Description

When I pass a className that I define in my CSS, the style is overridden by the Precise UI component. I would expect my class to override the default component style.

Here is an example.

Steps to Reproduce

1. Make this CSS class:

.red {
  color: red;
}

2. Render this JSX:

<Button className="red">Hello</Button>

3. Check the colour of the button text.

Expected behavior: The text would be red.

Actual behavior: The text is white.

Environment details: macOS 10.15.3, Chrome 80 and Firefox

[kbariotis]

Disclaimer: I am not a maintainer of this project.

@garethbjohnson this is not necessarily an issue with this library. This is the expected behavior of the styled-components library.

Looking quickly through the code it seems like the className property is just being passed down each styled component, so you will probably be able to override it based on the documentation.

[garethbjohnson]

@kbariotis I understand that this is caused by styled-components. However, I did not expect to have to know such a detail of the underlying third-party library in order to use Precise UI in this way. Additionally, I do not like the coupling of concerns in having to increase the specificity of the CSS declaration for each class that I pass to a Precise UI component. Further, I expect that passing className to add style would be a common approach for any project not using styled-components for internal styling. Thus, I do consider this to be an issue with this library.

To anyone else having the same issue as me: read this styled-components documentation.

To any maintainer reading this: if you expect users to increase the specificity of the CSS declaration for any passed className used for styling, then please document this prominently enough for them to read about it before trying it.