Polaris-react: Pass through `className` and `style` props

[Introvertuous]

Feature request summary

I feel that most components, at a minimum should provide two props for modifying styling: className, and style. This is probably something that has come up before, and if so I would certainly appreciate the rationale on not doing this and maybe a discussion on the merits of making components more extensible.

Rationale

The reason this is useful is because you frequently run into situations where you need to modify the style of a component, and end up wrapping it in an element to achieve this, which is a terrible approach.

---

🌟 Feature requests that are not yet planned will be closed. We then use the issue’s :+1: upvotes to track and set priorities. See the contribution guidelines for more information.

[probot-shopify[bot]]

👋 Thanks for opening your first issue. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines. You can also join #polaris on the Shopify Partners Slack.

[Introvertuous]

Also, I would certainly be willing to create a PR for this, assuming there is interest from collaborators.

[danrosenthal]

@Introvertuous, as with all feature requests, I'm going to close this issue and allow interested folks to express their interest by upvoting with a 👍 on the original comment.

For a bit of background, this is a deliberate decision to not accept style or className props in our components. Historically, we have incurred a lot of support debt by allowing internal developers to style Polaris components directly. The consequence was typically lots of style regressions any time we changed something about the components folks were styling. This is less problematic for third party apps, but would still likely occur.

I'd be curious to hear what your specific need is. Can you tell me a bit more about what you're trying to style and how?

[Introvertuous]

@danrosenthal It is not any one particular use case, it is just a very common need to style the root element of a component. Without passing through those props the user is forced to wrap your component and apply styling to that wrapper. In my opinion this makes for a worse user experience than potential breaking of styles on upgrades. I would certainly incur the risk of style breaking over compromising on code.

[Skriptach]

Agree with @Introvertuous. It is a common need to customize components.

[richardscarrott]

Yeah a lot of libraries allow this so call sites can add layout properties, e.g. position / margin etc. but agree it means there's more risk for Polaris changes to break call sites -- if for example the call site changed the display to block and later Polaris decided to layout its children with display flex instead of floats.

For now, we're just wrapping Polaris components with extra components to handle layout, e.g.

<Select className={styles.select} />

<div className={styles.select}>
   <Select />
</div>

.select {
   margin: 0 0 20px;
}