Javascript 如何将样式化组件样式应用于自定义组件？

我有一个名为

StyledButton

的样式化组件和一个名为

AddToCart

的React组件。我想将样式化的from

StyledButton

应用于

AddToCart

我已经尝试了以下方法：

从“样式化组件”导入样式化；
从“/AddToCart”导入AddToCart；
从“/styles/StyledButton”导入StyledButton；
const StyledAddToCart=已设置样式（AddToCart）`
${StyledButton}
`;

我想做的已经在上的文档中了，但这会将新样式应用于组件。问题是我想使用已设置样式的组件中的现有样式（

StyledButton

）

从文件中：

//例如，这可能是react路由器dom的链接
常量链接=（{className，children}）=>(
{儿童}
);
const StyledLink=已设置样式（链接）`
颜色：淡紫罗兰色；
字体大小：粗体；
`;
渲染(
未定型、镗孔连杆


风格独特、令人兴奋的链接
);

---

我非常希望将

StyledButton

中的样式应用于

styledaddotcart

，而无需手动复制样式。

您可以与

css

util共享样式：

//从“样式化组件”导入样式化，{css}
const{css}=styled；
常量链接=（道具）=>
const sharedBtnStyle=css`
颜色：绿色；
边框：1px实心#333；
利润率：10px；
填充物：5px；
`;
const StyledButton=styled.button`
${sharedBtnStyle}
`;
const AddToCartBtn=已设置样式（链接）`
${sharedBtnStyle}
颜色：红色；
`;
函数App（）{
返回(
样式按钮
样式链接
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）
这解决了我的问题，是在组件之间共享样式的好方法，谢谢！我使用
css
从原始组件中提取样式，然后使用您建议的模板文本将它们传递给原始组件。