Is there a "special" syntax for adding styles to children of a React Native component?

user_749127 0
Viewed 98

So, in regular CSS, if I want to apply a style to all children of elements with a given id/class/element name, I would do this:

(id/class/name of parent element) * {

}

This will automatically apply to every child of the specified parent element(s) - I don't need to add any classes/ids/names, etc. to the children.

Is there an equivalent syntax in React Native? Best I can do so far is

view {
// style here
}
subelementsOfView {

}

and then add the subelementsOfView style to all children of View.

Am I wrong? Is there another syntax I can use?

react-native
1 Answers

You would create a StyleSheet as shown:

export const styles = StyleSheet.create({
   someStyleKey: {
      backgroundColor: 'red'
   }
})

Wherever your children components are you can do the following:

import { styles } from '../<location-of-stylesheet>'

// Using View as an example component
<View style={styles.someStyleKey}></View>

If your child component already has a style you can also pass in an array of styles such as:

<View style={[existingStyle, styles.someStyleKey]}></View>

Whatever comes later in the style array will overwrite previous style values.

user_120268960
Related