How do I style child components through parent components?

Asked

Viewed 192 times

1

I’m learning React Activate, and I have a question related to styling children components more productively, because so far, I have to create a style and insert it into each component I want to stylize.

My question is: how to create only one style, and through it stylize the children components without having to insert the style into the child component?

For example:

<View style={ styles.pai }>
  <Text>Texto 1</Text>
  <Text>Texto 2</Text>
  <Text>Texto 3</Text>
</View>

I want all Text components of the View component children with style style={ styles.pai } are red in colour.

In CSS this would be done using inheritance, this way:

.pai Text{
  color: red;
 }

How to do this in React?

  • You can try using Styled-Component ... where you use pure css to edit some things. Take a look at their website: https://www.styled-components.com/

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.