如何在 styled-components 中扩展组件样式

Question

我有一个基本的 ElipseDetail 组件，如下图所示

<ElipseDetail text="1.07" />

当我使用该组件时，一切都按预期工作。

但现在我想在另一个地方重用该组件但在 Text 组件样式中添加一个扩展

如何使用 styled-components 实现这一点并重用组件但更改子文本？

import React, { ReactElement } from "react";
import styled from "styled-components";

interface Props {
  text: string;
  children?: React.ReactNode;
}


export const Container = styled.div`
  padding: 4px 12px;
  border-radius: 30px;
  background-color: #eaeef2;
  display: inline-block;
`;

export const Text = styled.p`
  font-size: 12.5px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: 0.63px;
  color: #687c97;
`;


export default function ElipseDetail({ text, children }: Props): ReactElement {
  return (
    <Container>
      <Text>{text}</Text>
      {children}
    </Container>
  );
}

Answer 1

我建议创建一个容器，如果 Text 在该容器中，则添加不同的属性。 & 这里的意思是这个类名，所以它的计算结果是Text，所以当文本在ElipseContainer 中时，它会根据你的用例以不同的方式表现。在这里，如果它用ElipseContainer 包裹，那么Text 的颜色为绿色，否则为红色。 这是沙盒链接： sandobx

const ElipseContainer = styled.div``;

const Text = styled.p`
  color: red;

  ${ElipseContainer} & {
    color: green;
  }
`;

 const App =() =>   
      <ElipseContainer>
        <ElipseDetail text="word2" />
      </ElipseContainer>

Answer 2

由于 ElipseDetails 不是样式化组件，而是调用样式化组件，因此您可以执行以下操作：

function ElipseDetail({ text, children }: Props): ReactElement {
  return (
    <Container>
      <Text>{text}</Text>
      {children}
    </Container>
  );
}

ElipseDetail.Styled = Container;

export default ElipseDetail

然后，在不同的组件中，您可以像这样更改它：

const StyledElipseDetail = styled(ElipseDetail.Styled)`
  ${Text} {
    //
  }
`;

...

return <StyledElipseDetailed>...</StyledElipseDetail>

PS - 我从older question of mine 中采用了这种方法，我发现它非常有用。