xstyled
xstyled copied to clipboard
Q: Exposing props to allow for easier UI abstraction
💬 Questions and Help
Firstly, the project looks awesome, having come from a heavily styled-components
and styled-system
background.
My first question, is around how you might expose props for creating UI components. Often with projects, we tend to abstract the UI components such as Button, Input and so on, into more reusable components with strict Typescript interfaces.
In essence, we would take something like this....
<x.button
type="button"
color="white"
transition
bg={{ _: 'emerald-500', hover: 'emerald-800' }}
>
Into it's own Button component and expose props such as variant
which may then further style the component.
This removes the requirement to always pass a bunch of reused props every time the primary button is needed. It also removes the @xstyled...
calls from all pages and into less components, should the need to change arise.
Previously with styled-system
we used to generate/build prop types (interfaces) so that we could further expose those props should we wish. For the above example, we might want to expose bg
but everything else be behind the scenes. What would be the recommended approach for this?
Furthermore, is there any documentation around creating variants? I read that some of the variants part was deprecated as it was confusing. But interested to learn more around what approach might be best. In the above example, just creating variants for buttons that are predefined by the actual Button
component, rather than exposing x.button
everywhere.
Thanks!
I'm a big fan of having a utility that behaves similarly to styled(MyComponent)
from styled-components
.
interface ButtonProps {
children: React.ReactNode;
}
const Button = styled<ButtonProps>(x.button, {
type: 'button',
color: 'white',
transition: true
bg: { _: 'emerald-500', hover: 'emerald-800' }
})``;
const DangerButton = styled<ButtonProps>(Button, {
bg: { _: 'red-500', hover: 'red-800' }
})``;
ps.: You can already use this pattern with defaultProps
or .attrs
.
@StuartMorris0 maybe the approach in https://github.com/gregberge/xstyled/issues/224 could help you.