Как отправить стили из родительского компонента в дочерний компонент?

Question

Я хочу отправить объект стиля от родительского к дочернему компоненту.Parent.js:

const styles = theme => ({

  field: {
    flexGrow: 1,
    position: 'relative',
    zIndex: 1,
  },
});

class Parent extends React.Component {
 render(){
  const {classes } = this.props
  return (
   <div>
    <Child className={classes.field} />
   </div>
  )
}
}

Child.js:

const styles = theme => ({

  container: {
    flexGrow: 1,
    position: 'relative',
    zIndex: 2,
  },
});

class Child extends React.Component {
 render(){
  const {classes} = this.props
  return (
   <div>
    <Child className={classes.field} />
   </div>
  )
}
}

Возвращает классы объектов компонента Child, не содержащие поле стиля, содержащееся в компоненте Parent.Есть ли какие-либо предложения по отправке стилей от родителя к ребенку?

Answer 1

вы создали const.styles, но вы звоните {classes.field}

попробуйте изменить styles на classes или:

const { styles } = this.props

отправить ребенку через реквизит:

 <Child className={styles.field} />

затем

class Child extends React.Component {
 render(){
  const {styles} = this.props
  return (
   <div>
    <Child className={styles.field} />
   </div>
  )
}

и className к собственности, я думаю, не лучший выбор

Answer 2

Вы можете попробовать что-то вроде этого: -

// Parent component 
class Parent extends React.Component {
 render(){
  return (
   <View>
    <Child customStyle={styles.childStyle} />
   </View>
  )
}
}

const styles = StyleSheet.create({
 childStyle: {
   color: "red"
 }
});

// Child component

class Child extends React.Component {
  render () {
    return (    
    <View>
        <Text style={[this.props.customStyle, styles.text]}></Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  text: {
    fontSize: 14
  }
});