Add styled component rule (#1261)

* Add StyledComponent rule

* update doc

* update doc

* update doc
This commit is contained in:
Weiko
2023-08-17 20:58:02 -07:00
committed by GitHub
parent 390e70a196
commit 9b34a0ff3d
70 changed files with 433 additions and 354 deletions

View File

@ -6,20 +6,20 @@ export type Props = React.ComponentProps<'div'> & {
description?: string;
};
const Container = styled.div`
const StyledContainer = styled.div`
align-items: center;
display: flex;
flex-direction: column;
`;
const Title = styled.span`
const StyledTitle = styled.span`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.lg};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
text-align: center;
`;
const Description = styled.span`
const StyledDescription = styled.span`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.regular};
@ -29,9 +29,9 @@ const Description = styled.span`
export function Heading({ title, description, ...props }: Props) {
return (
<Container {...props}>
<Title>{title}</Title>
{description && <Description>{description}</Description>}
</Container>
<StyledContainer {...props}>
<StyledTitle>{title}</StyledTitle>
{description && <StyledDescription>{description}</StyledDescription>}
</StyledContainer>
);
}