如何在React Native中合并defaultProps样式与内联样式？

直接修改Text.defaultProps.style的方式存在缺陷：当你传入新的style属性时，React会用传入的样式完全替换默认样式，而非自动合并。你之前尝试的两种写法无效，是因为this.props.style仅包含你传入的自定义样式（比如{color: 'white'}），并没有包含默认的fontWeight: '100'，自然无法合并出预期效果。

最稳妥的解决方案是封装一个自定义Text组件，在组件内部处理样式合并逻辑，示例如下（以React Native为例，Web端写法类似）：

import React from 'react';
import { Text, TextProps } from 'react-native';

const CustomText = (props: TextProps) => {
  // 合并默认样式与用户传入的样式，用户样式会覆盖重复属性
  const mergedStyle = [
    { fontWeight: '100' }, // 你的默认样式
    props.style
  ];

  // 透传所有props，同时替换合并后的样式
  return <Text {...props} style={mergedStyle} />;
};

export default CustomText;

之后所有需要使用Text的地方，改用这个自定义组件即可：

<CustomText style={{ color: 'white' }}>
  这段文字会同时拥有fontWeight:100和color:white样式
</CustomText>

如果不想封装组件，也可以手动在每次使用Text时引入默认样式并合并：

// 定义全局默认文本样式
const defaultTextStyle = { fontWeight: '100' };

// 使用时手动合并
<Text style={[defaultTextStyle, { color: 'white' }]}>...</Text>

这种方式虽然可行，但需要每次手动引入默认样式，复用性不如封装组件。

内容的提问来源于stack exchange，提问作者Fclass