You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Im not sure how to properly style a button component with multiple sizes and colors. For example I have a theme object with something like this structure.
buttons: {
primary: {
backgroundColor: 'primary',
// more styles
},
secondary: {
backgroundColor: 'secondary',
// more styles
},
textButton: {
small: {
// more styles
},
big: {
// more styles
}
},
iconButton: {
small: {
// more styles
},
big: {
// more styles
}
}
}
Using reflexbox how could I define a small textButton with primary coloring?
<Box
as="button"
ref={ref}
onClick={onClick}
__tx="buttons"
variant="textButton.small" //want to add a color here too
sx={{}}
{...rest}
>
So far I can only get a small textButton or primary colors? I can set buttons.primary as a variant inside small, but then would I need to do that separately for every color, size and button type separately?
The text was updated successfully, but these errors were encountered:
My solution was to override the variant()function in reflex box to handle an array of variants and merge the objects from the theme. It ends up working something like this
Hi all 馃憢
Im not sure how to properly style a button component with multiple sizes and colors. For example I have a theme object with something like this structure.
Using reflexbox how could I define a small textButton with primary coloring?
So far I can only get a small textButton or primary colors? I can set
buttons.primary
as a variant inside small, but then would I need to do that separately for every color, size and button type separately?The text was updated successfully, but these errors were encountered: