StyleNames sequence
The sequence of the StyleNames applied to the Stylish components & Styler hooks does matter. Similar to the React Native's StyleSheet.create() API, the later styles of styleNames override the styles of previous styleNames.
As shown below, the syle applied by 'Padding.Left.Large' will override the left padding applied by the Padding to the View component.
import { View } from 'react-native-stylo';
import { TViewStyle } from '../themes/types';
const ComponentA = () => (
<View<TViewStyle> styleNames={['Padding', 'Padding.Left.Large', 'Border.Radius', 'BackgroundColor.Primary']}>
{...}
</View>
);
import { View } from 'react-native';
import { useViewStyles } from 'react-native-stylo';
import { TViewStyle } from '../themes/types';
const ComponentA = () => {
const styles = useRef(
StyleSheet.create({
viewStyle: useViewStyles<TViewStyle>(['Padding', 'Padding.Left.Large', 'Border.Radius', 'BackgroundColor.Primary']),
})
).current;
return (
<View<TViewStyle> style={styles.viewStyle}>
{...}
</View>
);
};