Closed IgnusG closed 1 year ago
You can also do this, which allows us to use dynamic properties together with static ones but it is a lot of boilerplate and you have to come up with CSS variable names:
const MyButton= styled('div').attrs(({ style = {}, ...props }) => {
const { spacing } = useTheme();
return {
...props,
style: {
...style,
'--x-spacing-2': spacing(2),
},
};
})`
padding-inline: var(--x-spacing-2);
background-color: blue;
`;
Another Idea I played around with would be similar to #730 so I'm not sure whether this wouldn't complicate things too much:
const MyButton= styled('div')`
${() => {
const { spacing } = useTheme();
return `
padding-inline: ${spacing(2)};
`;
}}
background-color: blue;
`;
The benefit would be that we don't have two sources of styles (additional css call) and it's clearer how the user can get dynamic styles into their styled
components in an easy to follow way.
Or to make the VS Code extension work and make the style extraction easier:
const MyButton= styled('div')`
${() => {
const { spacing } = useTheme();
return css`
padding-inline: ${spacing(2)};
`;
}}
background-color: blue;
`;
hey thanks for the suggestions. Some of these are feasible but complex, and in general i've come to the opinion that the styled
API is generally worse than using the css
prop. It's slower, harder to type, and it's overall composition model doesn't work well with the static constraints of astroturf. I still thinks valuable for simple components, but one you are into dynamic values based on props i would say it's worth it to use the css
prop instead.
I was looking for a way to have
styled()
components but with dynamic values inside their css -> for examle MUI's theme utilities:I saw that it's currently possible to "process" custom props in the
attrs
callback, so I though that's cool, what if we use that to get our dynamic props and pass the css prop that we generate with astroturf:Now this doesn't work (least because of the validation check that looks if we do use css correctly. I've played around with it a bit (disabling checks here and there, messing around in node_modules), but so far without luck - maybe I'm missed something (or this goes against how the library works right now).
You can of course do something more traditional like but this adds overhead in terms of typing the props and we either have to write every component like this (even ones without dynamic CSS properties, which adds a lot of extra bloat like in
MyButtonStatic
) or we'd have to rewrite the static component the moment we add a dynamic property and back if we remove them to keep everything lean.Anyway, I wanted to see if this might be something to that would find its place in astroturf 🙂