I want to add CSS for my child class in React Native

Question

An answer is required in React Native.

<View>
  <View className="parent1">
    <Text>hello with green</Text>
  </View>
  <View>
    <Text>hello with default color</Text>
  </View>
</View>

Now I want to add CSS to Text which has a parent whose classname is parent1 in React Native.

Answer 1

If you want to give CSS for the text tag which has parent classname as parent1 then follow these steps:

const stylesB = StyleSheet.create(
{

  Text:
  {
    color: '#ffffff',
  },
  p:
  {
    color: '#ffffff',
  },
  h3:
  {
    color: '#ffffff',
  },
  h1:{
    color: '#ffffff',
  }

});

<View>
  <View className="parent1" styles={stylesB}> //give styles as stylesB instead of giving stylesB.Text
    <Text>hello with green</Text>
  </View>
  <View>
    <Text>hello with default color</Text>
  </View>
</View>

This change will show color white for children of tag which have classname parent1 and whose tags are Text, p, h1, and h3.