Question

我知道我们可以使用诸如Link的{{1}}组件之类的样式组件来扩展或添加样式。所述特征表示为here。但是，我的问题是，如何合并两个或多个现有组件，然后添加更多样式？

就我而言，我有一个可重复使用的组件，用于文本元素（如react-router-dom，span和p）的标准字体大小，字体粗细等。我想使用react-router-dom的Link组件。目前，我有这样的事情：

任何建议将不胜感激。

编辑

我的import styled from 'styled-components'; import { Link } from 'react-router-dom'; import { TextElement } from '../common'; /* Can I do something like this? const MyLink = styled(Link, TextElement)` margin: 10px 0; `; or this? const MyLink = styled([Link, TextElement])` margin: 10px 0; `; */ const MyPage = props => ( <> <MyLink to="/next-page" /> </> );组件就是这样的：

TextElement

Answer 1

您可以使用 css helper 来使用 mixin。假设您将 TextElement 的代码放在 spaced 混合中，例如：

import { css } from 'styled-components';

const spaced = css`
  margin: 10px 0;
`;

Link 的另一个 mixin

const styledLink = css`
  color: blue;
`;

然后您可以将您的 MyLink 定义为：

import styled from 'styled-components'

const MyLink = styled(Link)`
  ${spaced}
  ${styledLink}
`;

Answer 2

样式组件可以是您的自定义组件的包装。例如：

Your style component:

export const CustomSpanWrapper = styled.div`
    span {
        ...your-styles
    }
`;

Your other component:

<CustomSpanWrapper>
    <CustomSpan>
</CustomSpanWrapper>

将多个样式化元素与样式化组件相结合

编辑

2 个答案: