title: best practices to reduce duplicated style in styled-components
body: <p>I want to write DRY (Donot Repeat Yourself) code with <strong>styled-component</strong>.</p>
  <p>I know best way to be DRY with styled-component is like below,</p>
  <pre><code>cost fontSize = '18px';
  const StyledComponent = styled(Component)`
      font-size: ${fontSize};
  `;
  const StyledCompoentA = styled(StyledComponent)`
      background-color: red;
  `;
  const StyledCompoentA = styled(StyledComponent)`
      background-color: blue;
  `;
  </code></pre>
  <p>However I don't know how to apply this on below code,</p>
  <pre><code>import styled from 'styled-components';
  import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
  
  const StyledMenuUnfoldOutlined = styled(MenuUnfoldOutlined)`
      font-size: 18px;
      line-height: 64px;
      padding: 0 24px;
      cursor: pointer;
      transition: color 0.3s;
  
      &amp;:hover {
          color: #1890ff;
      }
  `;
  
  const StyledMenufoldOutlined = styled(MenuFoldOutlined)`
      font-size: 18px;
      line-height: 64px;
      padding: 0 24px;
      cursor: pointer;
      transition: color 0.3s;
  
      &amp;:hover {
          color: #1890ff;
      }
  `;
  </code></pre>
  <p>Is there a better way to reduce duplicated styles?</p>