javascript - 如何在样式组件中扩展组件样式

Question

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

<ElipseDetail text="1.07" />

当我使用该组件时，一切都按预期工作。
但是现在我想在另一个地方重用该组件，但要为 Text 组件样式添加一个扩展
如何使用样式组件实现这一点并重用组件但更改作为子项的文本？

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

由于 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 中采用了这种方法我发现这很有用。