How can I convert the CSS to do the following in react native implementation?

.parent.parent-1 .sub-class-1 {
  background: yellow;
}

.parent.parent-2 .sub-class-1, .parent.parent-2 .sub-class-2 {
  background: red;
} 

<div class="parent parent-1">
  <div class="sub-class-1">Test1</div>
  <div class="sub-class-2">Test2</div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You could treat the div as a View and then create a stylesheet for styles, so -

import { StyleSheet, View, Text } from 'react-native';

const styles = StyleSheet.create({
  parent: {
    backgroundColor: 'yellow',
  },
  subClass: {
    backgroundColor: 'red'
  },
});

<View style={styles.parent}>
   <View style={styles.subClass}><Text>Text1</Text</View>
   <View style={styles.subClass}><Text>Text2</Text</View>
</View>

disclaimer - I'm not so sure your CSS is correct, I don't see where you are using 'parent-2' so I've just assumed a simple example

CodePudding user response：

You can use styled-components:

Example:

export const Container = styled.View`
  height:10px;
  width:20px;
  flex-direction:row;
  background-color:null;
`

Use:

Wrap your view or child in Container shown below:

<Container>
   //...rest of your code
</Container>

Reference Link:

styled-components with React Native

styled-components