@emotion/styled: Add Transient Props

The problem

In 5.1.0, styled-components introduced transient props. Props prefixed with a dollar sign ($) are “mark[ed] as transient and styled-components knows not to add it to the rendered DOM element or pass it further down the component hierarchy”.

Proposed solution

This would be useful functionality to support – I am exploring migrating from styled-components to @emotion/styled.

Alternative solutions

None suggested. The intent is to follow this implementation detail introduced by another CSS-in-JS project.

Additional context

Material UI v4 -> v5 is migrating to emotion, and my project uses styled-components today. I’m trying to get my codebase to coalesce around a single CSS in JS solution, and the fewer the API differences there are, the lower the barrier to migration is.

[v1kt0r1337]

Transient props would be appreciated.

[WilliamHoangUK]

I’ve recently migrated a project I’m working on to MUI v5 and started using emotion for the first time. Came to this thread after noticing an error about receiving a boolean value for a non-boolean attribute and was hoping for a neat solution to deal with it. Came across this for styled-components, and was hoping for similar functionality for emotion. I echo the sentiments of others who don’t want to have to explicitly filter out props that we don’t want to pass to the DOM.