如何删除样式组件中的重复代码

Question

目前，我正在使用和和样式组件在我的项目。

但是，当使用和时，作为样式组件的组件，下面的代码被重复。

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

我想删除代码复制AnotherButton通过动态更改按钮的()部分来改变变量变量。

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

有办法解决上述问题吗?

Answer 1

您可以将通用样式移动到变量中，使其在组件之间可重用。

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