-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
@emotion/styled: Add Transient Props #2193
Comments
I'm not super keen about it but we also maintain compatibility with SC (unless we feel strongly that it's not worth it) so it might be worth adding support for this. @mitchellhamilton thoughts? |
I'm also not super keen. For migration purposes, you could have a wrapper around styled that implements it with shouldForwardProp.
This isn't totally true. We don't have |
More context on the rationale for why the
It's presented primarily as quality-of-life, developer-experience type improvement (though I'd imagine the value of it is certainly subjective). Additionally, styled components discusses forwarding more here (I believe this part aligns with Emotion):
https://styled-components.com/docs/basics#passed-props Emotion's current prop-forwarding is summarized as:
https://emotion.sh/docs/styled#customizing-prop-forwarding The suggested workaround is a wrapper, which could look roughly something like this (if the thinking is incorrect here, please feel free to elaborate): import styled from '@emotion/styled';
export const StyledEmotionInterop = (component: string | React.Component, template: string) => {
return styled(component, {
shouldForwardProp: (prop: string) => !prop.startsWith('$')
})(template);
} I'd like to hear more about the specifics of the concerns (e.g., is there a weak or strong objection to the implementation detail). Thanks! |
One downfall of using a wrapper function: |
This is the pattern I have been using successfully with Material UI:
Note that the
The downfall is that it is opt-in (you have to explicitly use |
I'm not sure if that's totally correct - you should be able to utilize |
Oh nice. I actually didn't even know that existed. Guess I should look at those docs more 😅 |
@Andarist Could you give an example of |
|
@Andarist How does this apply to relative imports within the same codebase? Say a file in the same codebase defines and exports a |
Well - I would recommend creating a package for your own styled wrapper so you could configure a single entry for the
I don't think it should steal it - but it might add an unnecessary label in this case. You could configure Babel to ignore the file with styled wrapper so it wouldn't happen. Wrapping in a package would also make it easier. |
@Andarist Thanks for the suggestion. Too bad |
It's mostly around the fact that it creates a distinction between "styled components" and "regular components" with the naming scheme when whether something is a styled component or not should just be an implementation detail. We also try to maintain that |
Hi, just I want to say that I have used this solution and works great. Would be an option to add a helper function exportable from Emotion and thats all? It can be maybe customizable with a regex pattern maybe? |
has there been any progress on this or any changes of opinion if it should be done? this is really needed for DX, plus styled-components API parity... |
The API parity with Styled Components is not a goal. The mentioned concerns expressed here are still very much true. It also doesn't seem like there are a lot of people looking for this functionality since this thread isn't that busy at the end (I would probably have expected it to be much more busy based on this being in SC and all). This also has an impact on our consumers and I would be wary about including support for this in the current major version. |
I also just started using emotion instead of styled-components and this is the first inconvenience that I encountered. I really hope that emotion will start using $ for transient props like styled-components in order to make devs life easier. It's just uncomfortable and ugly to pass |
@Andarist i guess people don't reply on old topics, and some people don't even know its existence in SC. At first i was also not bothered, thought about the nasty wrapper and thought i dont want to leave my code like this. So when i used styled components it was easy to understand what props should not be added to the component. Now i did use the same pattern and all of a sudden i have to change prop I can understand this can be breaking by people using a $props convention (who on hell, but yes Maybe) for wanting them up to the dom. So maybe it should be in the next major? But please make our lives a little more easier :) |
Note that we conditionally forward props to the underlying DOM elements (this can be customized with |
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 I don't wanna be bothered to create:
And the last thing I need is yet another |
Hi @callmeberzerker I agree with you that this is a very shitty way, but it can be improved like import { transientOptions } from '@utils'
// just an example of a $property, thought it does not make so much sense this way lol
interface StyledProps {
$darkTheme: boolean
}
export const MyComponent= styled('div', transientOptions)<StyledProps>`
background-color: var(--surface-${props => props.$darkTheme}); having in some common file import { CreateStyled } from '@emotion/styled'
export const transientOptions: Parameters<CreateStyled>[1] = {
shouldForwardProp: (propName: string) => !propName.startsWith('$'),
} Yes, it would be better with a default built in approach for emotion, but for the moment I use this way, and the code does not look too messy! Original solution in this thread by @jmca |
Thank you @jmca in my case im using a third party UI library Chakra-UI and i now can prevent props from passing and throwing errors to me (prop needs to be lowerCase, value must be String etc). Codebase became much better now :) I still hope it will be made available in the core of Emotion. |
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. |
I came to this thread from the same SC issue as @WilliamHoangUK, having needed transient props for the first time after moving to MUI v5. Having some sort of built-in solution would be preferable to the various workarounds. For now, I'm just passing |
We were using css-in-js, we were passing props to styles that were only meant to affect styles. When we try to move to @emotion, this is one of the first real annoyance. I was already thinking about creating a filter to not forward any props prefixed with some tag. Were hoping it could applied globally. Did not know about SC transiantProps but obviously I think its a great feature that is badly missing from emotion. For now we'll create the re-usable transientOptions as explained further up, and apply it on-the-go for each component that need "style-only related props" Hopefully @emotion will come up with an out-of-the-box way of doing this. |
I just switched a project from styled-components to emotion and have run into this issue within minutes after switching. Transient props feels like a must, and this feels like a major inconvenience. Creating wrapper exports or injecting extra functions/objects into every component that needs this is quite frankly absurd for a solution. Emotion should be a pleasure to use right out of the box, I shouldn't have to jump through all these hoops to do something as simple as pass props around. |
I agree that having this implemented would make my life much easier. We're also just in process of migrating from SC to emotion, and this is a huge pain point. If you don't want to support it out of the box, maybe a configuration could be added, where it's possible to add a default behaviour for |
I also would prefer overwriting the default behavior for shouldForwardProp, maybe through provider context or instance creation. We could document a clean way of having "styled-components" like transient props in emotion with this approach. My case is totally different, I don't want SVG props to be passthrough in my normal components. I have styled-components with options like color, spacing etc. and I prefer just disabling all svg passthroughs. |
Why does emotion forward boolean prop to dom element by default? If it doesnt big use case for transient props would be resolved. |
I use Material UI (MUI) and it took me quite some time to realize that it was coming from emotion (being the default UI engine of MUI). I had to change the UI engine of MUI back to Styled-Component. This is how to do it: https://mui.com/material-ui/guides/styled-engine/#how-to-switch-to-styled-components |
When I create an interface for an element: interface DivProps {
big: boolean
} It means I don't want its props for the HTML element const StyledDiv = styled('div', {
shouldForwardProp: (prop) => prop !== 'big'
})<DivProps>({
// ...
}) So, ideally, I would have to write this: const StyledDiv = styled.div<DivProps>({
// ...
}) To be honest, this library is messing two different sets of props together, and we are trying to split them up manually. The definition stays this untouched: interface DivProps {
big: boolean
}
const StyledDiv = styled.div<DivProps>({
// ...
}) However the usage will be different. There are 3 solutions: <StyledDiv elementProps={{ className: "something" }} styledProps={{ big: true }} /> With a dedicated elementProps: <StyledDiv big={true} elementProps={{ className: "something" }} /> Or with a dedicated styledProps which would be strange for a WrapperComponent like StyledDiv: <StyledDiv className="something" styledProps={{ big: true }} /> Side note: In languages like Rust there would be no other solution. You would have to go with the first one, unless you want to copy the props from the elementProps and the styledProps to a new struct, which would be a maintenance hell. Unfortunately JS allows these evil solutions like which we have now. |
TLDR emotion will probably never add this feature 👎🏻 |
As a more junior developer this is holding me back quite a lot for something as basic and important as passing props around. |
@Andarist I feel like this should be revisited, even if there's not a clear path forward. It's by far the most thumbs-upped issue on the tracker at this point with 51 currently - more than double the next highest. |
We all hope that some sort of mechanism will be implemented to help alleviate this problem. But after a few years, it just feels like the dev team wont do anything about it |
- Fix DOM element prop warning: Use transientOptions() from this link emotion-js/emotion#2193 (comment) Example of warning below - Fix GIFs not having alt warning: add a default if caption doesn't exist - Compute custom aspect ratio if image is cropped in Sanity - Add priority to first 7 rows of images - Refactor props Warning: React does not recognize the `backgroundColor` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `backgroundcolor` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
Was getting another check on this thread after Oct 7, 2021. It's sad that this is still a problem, so avoiding emotion-js this time. |
8 more thumbs-ups since my last comment about 75 days ago. |
Any updates on this? |
We would like to see this feature! |
so, it has been 2 years since the start of this conversation... has emotion implemented this feature? Docs on their website don't work and i can't find an answer anywhere |
@MadPeachTM Most probably not answer is right here, simple JS version (there are TS examples in the thread):
Then add it when necessary
|
Any plans to add this? |
Anyone more knowledgeable about creating a wrapper with TS + MUI?
|
Every solution on making a wrapper around the import { CreateMUIStyled, styled as _styled, Theme } from '@mui/material/styles';
const createProxyStyled = (): CreateMUIStyled<Theme> => {
const handler: ProxyHandler<CreateMUIStyled<Theme>> = {
apply: function (target, _, argArray) {
return target(
argArray[0],
{
...(argArray[1] || {}),
shouldForwardProp: (prop) =>
!prop.toString().startsWith('$') &&
(argArray[1]?.shouldForwardProp(prop) || true),
}
);
},
};
return new Proxy(_styled, handler);
};
export const styled = createProxyStyled(); |
Another possible workaround is monkey patching I've been using and recommending Emotion for a long time and it is sad to see that when the greater ecosystem (MUI) embraces Emotion, the users' first experience is hitting this brick wall without an easy, simple and reliable workaround. I understand and empathize with the maintainers' stance on API surface, scope and all that. Really, I do and I definitely support the notion that Emotion is not meant to be a drop-in replacement for styled-components, nor foster its design choices. How about allowing overriding the default |
I don't understand why allowing customization of the |
The lack of this feature is forcing us to migrate our app to using styled components instead. I don't really understand why this is so controversial. It is really weird setting up a new react app with emotion and then getting a bunch of react warnings about these invalid props being passed to the DOM and no simple way to omit them. |
I don't get the sense Emotion is maintained anymore. I think we're all headed for |
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.
The text was updated successfully, but these errors were encountered: