Question

我在另一个 Text 组件内有 Text 组件：

<Text style = {styles.firstText}>
     {this.props.firstText}

     {'  '}

     <Text style = {styles.secondText}>
           second text
     </Text>

     {'  '}

     <Text style = {styles.thirdText}>
           {this.props.thirdText}
     </Text>
</Text>

FirstText 具有 fontFamily = X 。

SecondText 需要具有 fontFamily = Y ，但 X 也适用于此。

如何在此处设置优先级？

尝试了 fontFamily：'Y'+'！important'，但是没有运气。

Answer 1

您可以阅读docs，他们会说：

在整个应用程序中使用一致的字体和大小的建议方法是创建一个包含它们的组件MyAppText，并在整个应用程序中使用该组件。您还可以使用此组件为其他类型的文本制作更特定的组件，例如MyAppHeaderText。

您可以使用所需的样式为文本创建包装器：

class MyAppHeaderText extends Component {
  render() {
    return (
      <MyAppText>
        <Text style={{fontSize: 20}}>{this.props.children}</Text>
      </MyAppText>
    );
  }
}

并在您的应用中使用它：

<View>
  <MyAppText>
    Text styled with the default font for the entire application
  </MyAppText>
  <MyAppHeaderText>Text styled as a header</MyAppHeaderText>
</View>

他们还解释说，您所发生的事情是故意的。

React Native仍然具有样式继承的概念，但仅限于文本子树。在这种情况下，第二部分将为粗体和红色。

<Text style={{fontWeight: 'bold'}}>
  I am bold
  <Text style={{color: 'red'}}>and red</Text>
</Text>

他们还解释了原因：

（Developer）React组件在设计时要牢记高度隔离性：您应该能够将组件拖放到应用程序中的任何位置，并相信只要道具相同，它的外观和行为就将相同办法。可以从道具外部继承的文本属性将打破这种隔离。



（实现器）React Native的实现也得到了简化。我们不需要在每个元素上都具有fontFamily字段，并且每次显示文本节点时都不需要遍历树直到根。样式继承仅在本机Text组件内部进行编码，不会泄漏到其他组件或系统本身。

！important在React Native

1 个答案: