className and style props missing
arianito opened this issue · 6 comments
what if I need to add classes or styles to the element itself?
See #8 (comment) and #2 (comment).
In short, you don’t - you only style the html elements you create.
I solve the problem by adding a parent class container and > div:first-of-type to select the react-outside-click-handler with CSS, actually, I need a 100% width to fill the screen, thanks anyway
If you wrap my content in a div as an implementation detail, you have to add a way to style it.
The article about not having css props talks about component libraries with components like Button, Typography, and so on. They're talking about avoiding a mess of styles that come from different places and interact with each other in unpredictable ways. This wrapper div literally has no other styles.
I think the better approach is to think about actual, real use cases instead of blindly following simple rules like "never add a className prop". Here's one - I want the stuff inside the click handler to fill the full 100% of the parent component (context - it's a dropdown in a mobile layout). If I avoid styling the wrapper div and just "style the DOM nodes that I created", width: 100% doesn't work as expected because it takes up the full width of the wrapper and not the parent.
The best way to fix my app currently is a really dirty way of adding styles to the wrapper div, so the "no className prop anywhere" approach is actually making my codebase worse.
I really hope you'll reconsider this design choice, but judging by how much user feedback you already ignored and how many contributions you turned down, there isn't a lot of hope.
@ipeterov i agree you need some way to style it. That way shouldn't be "the user passes in CSS directly", it should be "explicit props that determine which preselected styles are used".
I think if it actually covers the potential problems users might have, then it's a perfectly valid design choice. Perhaps asking people who create className tickets about the actual problem they're having (so that you can add custom props for their use-case) is a good approach.
For my use-case, I realized that the display="contents" prop solves it completely, so my bad for missing it. I found 11 tickets mentioning classNames, styles or all props, maybe they all had the same problem I had, but maybe not 🤔
If I contribute a readme change that talks about my use-case and how display="contents" solves it without the need for custom styles, would you be open to reviewing it?
Absolutely!