Search code examples
reactjsreact-nativestyled-components

how do you style Text children in React Native with styled components?

so if I have this

const MyView = styled.View`
    background: green;
    color: red;
`

and I have

<MyView>
  <Text> Hello </Text>
</MyView>

the text is not red

so I tried

const MyView = styled.View`
    background: green;
    & > Text { color: red; }
`

you can do this with normal styled-components in React, however the text is still not red

how do I achieve this?

I know I can do

const StyledText = styled.Text`
    color: red;
`

and then

    <MyView>
      <StyledText> Hello </StyledText>
    </MyView>

but I want to avoid this if I can. is it possible to access Text child elements in RN?

Solution

  • Unfortunately styled-components for RN is just a wrapper that return a common RN View (or Text) with style prop <View style={...styles} />. There is no way to styling children in the parent block.