Open StuartMorris0 opened 2 years ago
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.
💬 Questions and Help
Firstly, the project looks awesome, having come from a heavily
styled-components
andstyled-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....
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 exposebg
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 exposingx.button
everywhere.Thanks!