Reactjs 如何对样式化组件的重叠样式进行反应？

我不熟悉使用样式化组件进行反应，遇到了以下问题：

---

如果我有10个样式化组件，并且每个组件都有属性：

背景色：绿色，我必须为每个样式化组件编写代码吗？或者有什么方法可以为所有人指明这一点？谢谢。
有两种方法可以实现共享样式

您可以使用该函数进一步设置现有样式化组件的样式，因此首先声明具有共享样式的基本样式化组件，并使用它定义更特殊的样式化组件：

import styled from 'styled-components';

const Base = styled.div`
  background-color: green;
`;

const StyledComp1 = styled(Base)`
  display: flex;
`;

const StyledComp2 = styled(Base)`
  display: block;
`;


您可以使用样式化组件实用程序功能：

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

const sharedStyles = css`
  background-color: green;
`;

const StyledComp1 = styled.div`
  ${sharedStyles};
  display: flex;
`;

const StyledComp2 = styled.div`
  ${sharedStyles};
  display: block;
`;


样式化组件支持主题化，请参见：Use@FRMR这可以用于颜色以外的东西吗？例如：
display:flex？是的，您可以传递变量来表示您想要的任何CSS值。@NickSmith有关详细描述，请参阅我的答案OHHHH！这正是我要找的。推荐哪一种？非常感谢你！！如果不想在不同类型的元素（div、p、span等）之间共享样式，请使用#1。如果你想，那就用#2.对，这很有道理！非常感谢你的帮助。顺便说一句，我想知道您是否知道任何遵循最佳编码实践的良好React+样式组件示例项目。也许有开源公司等？对不起，我帮不了你。过去我大量使用样式化组件，但这些组件都是经过自我训练的，我实际上不记得见过任何使用样式化组件的开源代码。哦，你的意思是发布一个新问题，询问那些示例项目，我只是看到了。是的，看起来这是绝对合适的，你已经得到了一些选票！祝你好运