如何将defaultProps中定义的样式与React Native中的内联样式合并？

2w2cym1i 于 2022-11-25 发布在 React

关注(0)|答案(1)|浏览(156)

我必须在React提供的Text组件上定义一些默认样式。

@ts-ignore
 Text.defaultProps.style = {fontWeight: '100'}

我必须在文本组件上定义一些特定于文本组件使用位置的其他样式。但当我尝试使用内联样式在文本组件中提供样式时，它似乎覆盖了defaultProps.style我拥有的www.example.com。

<Text style={{color: 'white'}}> // this text only has white color but not fontWeight that was defined in defaultProps.

有没有办法在使用react提供的Text组件时合并这两个组件？
我已尝试以下方法：

<Text style={{...this.props.style, color:'white'}}>

我也试过这个：

<Text style={[this.props.style, {color:'white'}]} >

这两种方法似乎都不起作用。

react-native

来源：https://stackoverflow.com/questions/74536287/how-to-merge-styles-defined-in-defaultprops-with-inline-styles-in-react-native

1条答案

按热度按时间

g52tjvyc1#

样式被覆盖，因为默认值没有与样式 * 合并 *。如果没有传入任何样式，将使用默认值，但如果传入任何样式，默认对象将被新样式对象覆盖。
一般来说，我不鼓励你在内置组件上设置默认属性。这会让代码很难理解，也不会以你想要的方式帮助你。此外，React就是为此而构建的。下面是一个Typescript示例：

interface Props {
  style?: StyleProp<TextStyle>;
  children?: string;
}

const defaultStyle = StyleSheet.create({
  default: {
    color: 'black',
  }
});

const MyText: React.FC<Props> = ({ style, children }) => {
  return <Text style={[ defaultStyles.default, style ]}>{children}</Text>
}

当你像上面那样把样式放入数组时，它们会从头到尾逐渐合并。

<MyText style={{ color: 'white' }}>Text</MyText>

适当的样式将会覆写预设样式中的色彩。不过，如果您

<MyText style={{ textDecoration: 'underline' }}>Text</MyText>

最终的样式表将被合并，并且同时具有color和textDecoration属性。更多信息请参见the docs。

赞(0）回复(0）举报 2022-11-25

我来回答

如何将defaultProps中定义的样式与React Native中的内联样式合并？

1条答案

相关问题

热门标签

最新问答