A lot of people new to frontend code get bitten by this, rest spreading a bunch of props on a styled component, only to notice way to late that suddenly there are a bunch of additional properties on the HTML tag making it invalid, render ugly or other horrible things.
Transient props is an elegant solution, yea sure you can already do it now but its not convenient, passing around the same function for every styled component. Indeed since v5 release of material UI I expect a lot more people will get bitten by this eventually
Exactly, and I don't understand the resistance to implement this functionality. This is the only real reason why I am still using styled-components (or mui-styled-engine-sc) vs the default engine in [email protected] which is emotion.
I don't wanna be bothered to create:
const TabsStyled = styled(MuiTabs, {
shouldForwardProp: prop =>
isPropValid(prop) && prop.startsWith('$')
})`
color: ${props =>
props.$myCustomVariantThatStartsWithDollarSign ? 'hotpink' : 'turquoise'};
`
And the last thing I need is yet another styled import (wrapper) in my codebase (babel-macros also don't work if the files are imported from elsewhere, but don't quote me on that). I currently have this issue on my watchlist but I would want clear indication from emotion team if they would add this, or we should just settle on using styled-components if we want this kind of functionality out of the box.
@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-componentsto@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.