Compound variants
Unistyles does not have first-class support for compound variants, but you can easily create them yourself.
First, you need to define your variants as described in this guide.
const stylesheet = createStyleSheet({ container: { variants: { size: { small: { width: 100, height: 100 }, medium: { width: 200, height: 200 }, large: { width: 300, height: 300 } }, color: { red: { backgroundColor: 'red' }, green: { backgroundColor: 'green' }, blue: { backgroundColor: 'blue' } } } }})
The easiest way to create a compound variant is to use the dynamic function.
const stylesheet = createStyleSheet({ container: { variants: { size: { small: { width: 100, height: 100 }, medium: { width: 200, height: 200 }, large: { width: 300, height: 300 } }, color: { red: { backgroundColor: 'red' }, green: { backgroundColor: 'green' }, blue: { backgroundColor: 'blue' } } } }, extraStyle = (size, color) => { if (size === 'small' && color === 'red') { return { borderWidth: 1, borderColor: 'black' } }
if (size === 'medium' && color === 'green') { return { borderWidth: 2, borderColor: 'black' } }
return {} }})
You can now merge both styles into one component, as with the regular StyleSheet.create
:
const MyComponent = ({ size, color }) => { const { styles } = useStyles(stylesheet, { size, color })
return ( <View style={[styles.container, styles.extraStyle(size, color)]} /> )}