从父/子组件覆盖 React Native 样式

【问题标题】：Override React Native Style from Parent/Child Component从父/子组件覆盖 React Native 样式
【发布时间】：2021-02-16 13:27:45
【问题描述】：

以 React Native 的方式，如果我有这样的结构：

function Component(props){
  return (
    <View style={props.style1}>
      <View style={{overflow: hidden}}>
        <View style={props.style2}></View>
      </View>
    </View>
  );
}

如何覆盖第二个视图上的{overflow: hidden}？假设我没有能力更改组件，因为我使用了一个我无权访问的库。

【问题讨论】：

标签： react-native stylesheet

【解决方案1】：

只有当你有这样的东西时，你才能覆盖样式

export interface Props {
  extraStyle: ViewStyle
  }


function Component(props: Props){
  return (
    <View style={props.style1}>
      <View style={[ {overflow: visible}, props.extraStyle ]}>
        <View style={props.style2}></View>
      </View>
    </View>
  );
}

并且您可以在外部访问 extraStyle 属性，因此如果您定义 extraStyle = {{overflow: 'auto'}}，那么它将被覆盖。否则，您无法从外部更改其样式

【讨论】：