如何使用 Styled Components React 做重叠样式？

Question

我是 React with Styled Components 的新手，遇到了以下问题：

如果我有 10 个样式化组件并且每个都具有属性：background-color: green;，我是否必须为每个样式化组件编写该属性？或者有什么方法可以为所有人指定吗？谢谢。

Answer 1

有两种方法可以实现共享样式。

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

   import styled from 'styled-components';
   
   const Base = styled.div`
     background-color: green;
   `;
   
   const StyledComp1 = styled(Base)`
     display: flex;
   `;
   
   const StyledComp2 = styled(Base)`
     display: block;
   `;
   

2. 您可以使用 styled-components css 实用功能：

   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;
   `;