How to remove duplication of code in styled components

Question

Currently, I am using antd and styled components in my project.

However, while using antd as a component of styled components, the following code was repeated.

import { DownOutlined, VerticalLeftOutlined } from '@ant-design/icons';
import styled from "styled-components";

const Button = styled(DownOutlined)`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;  
`;

const AnotherButton = styled(VerticalLeftOutlined)`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
`;

I want to remove code duplication of AnotherButton variable by dynamically changing only () part of Button variable.

import { DownOutlined, VerticalLeftOutlined } from '@ant-design/icons';
import styled from "styled-components";

// How to dynamically apply DownOutlined, VerticalLeftOutlined inside ()
const Button = styled()`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;  
`;

Is there any way to solve the problem described above?

Answer 1

You could move the common styles to a variable to make it reusable between components.

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

const commonStyles = css`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;  
`;

const Button = styled(DownOutlined)`
  ${commonStyles};
`;

const AnotherButton = styled(VerticalLeftOutlined)`
  ${commonStyles};
`;