1

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?

Clloud
  • 65
  • 5

1 Answers1

2

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};
`;
kind user
  • 40,029
  • 7
  • 67
  • 77