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

Question

I have a basic ElipseDetail component that looks like the image below

<ElipseDetail text="1.07" />

When I am using the component everything works as expected.

But now I want to reuse the component in another place but add an extension to the Text component style

How can I achieve that with styled-components and reuse the component but change the Text which is a child?

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

Since ElipseDetails is not a styled component, but calls to a styled one, you can do something like:

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

ElipseDetail.Styled = Container;

export default ElipseDetail

And then, in a different component, you can change it like so:

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

...

return <StyledElipseDetailed>...</StyledElipseDetail>

PS - I have taken this approach from an older question of mine which I found quite useful.