Search code examples
react-nativestyled-components

How style child element from parent in react native styled-components

I have container with child

  <Container>
  {[1, 2, 3].map((el) => {
    return (
      <Container2 key={el}>
        <Text>{el}</Text>
      </Container2>
    )
  })}
</Container>

and when I trying style child with help of selector it doesn't work for me.

const Container = styled(Block)`
  flex-direction: column;
  & > * {
    background: black;
    flex: initial;
    margin-right: 0;
    border-bottom-width: 5px;
    border-bottom-color: white;
  }
`

As I understood selectors don't work in native, but how we can style child from parent in this case?

Solution

  • It's not possible

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

    You can just create a stylesheet and add a class for those children components, then add the style tag to it, like so:

    <Container2 key={el} style={styles.yourCreatedClass}>
    <Text>{el}</Text>
  </Container2>