React Native中如何让Styled Component继承已有组件样式？

完全可以实现，下面是两种靠谱的做法：

方法一：用css辅助函数提取可复用样式 #

这是最推荐的方案，把BaseStyle里的样式逻辑抽成独立的css片段，既能维持原有的BaseStyle，又能在其他组件里复用：

先重构你的BaseStyle定义：

import styled, { css } from 'styled-components/native';

// 抽离可复用的基础样式
export const baseTextStyles = css`
    color: ${({ theme }) => theme.colors.gray900};
    font-size: 36px;
    line-height: 40px;
`;

// 原有的BaseStyle依然可以正常使用
export const BaseStyle = styled.Text`
    ${baseTextStyles}
`;

然后在包裹第三方组件的FinalComponent里直接引入这个css片段：

const FinalComponent = styled(thirdPartyComponent)`
    background-color: red;
    ${baseTextStyles}
`;

这种方式能完美继承主题动态值、样式规则，结构清晰且后续维护方便。

方法二：直接复用BaseStyle的样式（不推荐，依赖内部实现） #

如果不想重构现有代码，也可以通过访问BaseStyle的内部样式对象来复用，但这种方法依赖styled-components的内部实现，未来版本可能失效，仅作参考：

const FinalComponent = styled(thirdPartyComponent)`
    background-color: red;
    ${BaseStyle}
`;

注意事项 #

要确保你的thirdPartyComponent能够接收style属性并正确应用，React Native里绝大多数UI组件都支持这一点，但如果遇到不支持的组件，可能需要额外用View包裹一层再应用样式。

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