Replies: 2 comments
-
Variants are your way to do this for now but depend on a single prop being passed. I don't like the "catch-all" very much because at that point you just want to use an actual functional component most likely, and beginners would throw everything into that function which would be much slower than using static props. |
Beta Was this translation helpful? Give feedback.
-
One thing that's tripping me up with Tamagui is how to use color schemes for components. Right now I'm defining a button theme per color I want and it appears that there's a big function that generates these internally for the base tamagui theme ( Perhaps instead of a global function, you can create a function at the property/variant level? My mental model is something like this:
Current state: themes: {
...themes, // light and dark
dark_red_Button: {
background: 'red',
},
light_red_Button: {
background: 'red',
},
dark_blue_Button: {
background: 'blue',
},
light_blue_Button: {
background: 'blue',
},
...otherColors
}, The big limitation with this approach (this could be my lack of understanding of the lib) is that there's no way to add the context of a variant to alter the theme. For example, I'm not sure how to define themes for an outline button vs a filled button if I have to generate the themes manually. Proposed future state: import { styled, Button as ButtonCore } from 'tamagui'
export const Button = styled(ButtonCore, {
name: 'Button',
// theme would be light | dark in this hypothetical
background: ({colorScheme}, {theme, tokens }) => {
return tokens.color[`${colorScheme}.400.${theme}`]
},
}) Similarly, if variants received props you could do this. I don't currently know how to represent this in Tamagui without a custom component because if I need to know the button variant before adding colors and styles. import { styled, Button as ButtonCore, YStack } from 'tamagui'
export const Button = styled(ButtonCore, {
name: 'Button',
variants: {
variant: {
filled: (props, { theme, tokens }) => {
return {
background: tokens.color[`${props.colorScheme}.400.${theme}`],
color: tokens.color[`${props.colorScheme}.400.${theme}`],
}
},
outline: (props, { theme, tokens }) => {
return {
background: tokens.color[`${props.colorScheme}.50.${theme}`],
color: tokens.color[`${props.colorScheme}.400.${theme}`],
borderColor: tokens.color[`${props.colorScheme}.400.${theme}`],
}
},
},
} as const,
})
|
Beta Was this translation helpful? Give feedback.
-
Is sending props to the style object supported? E.g.
Beta Was this translation helpful? Give feedback.
All reactions