[英]How to extend component style in styled-components
我有一个基本的 ElipseDetail 组件,如下图所示
<ElipseDetail text="1.07" />
当我使用该组件时,一切都按预期工作。
但是现在我想在另一个地方重用该组件但在 Text 组件样式中添加一个扩展
如何使用 styled-components 实现这一点并重用该组件但更改作为子项的 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>
);
}
由于 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 - 我从我的一个较老的问题中采用了这种方法,我发现它非常有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.