styled-componentsで独自コンポーネントにスタイルを当てるときはclassNameプロパティが必要です。

はじめに

リファレンスの該当箇所に記載があります。

例えば

親コンポーネント（Index）で子コンポーネント（Typography）のスタイルを一部上書きしたい時

index.tsx

import React from "react";
import styled from 'styled-components';
import Typography from "./typography";

const ExtendTypo = styled(Typography)`
    font-size: 3rem
`

const Index: React.FC = () => {
    return (
        <>
            <Typography>ベースのfont-sizeは1rem</Typography>
            <ExtendTypo>これはfont-sizeが3remになるはず</ExtendTypo>
        </>
    );
};

export default Index;

うまくいかない例

typography.tsx

import React, { ReactNode } from 'react';
import styled from 'styled-components';

const StyledParagraph = styled.p`
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
`

type Props = {
    children: ReactNode
}

const Typography:React.FC<Props> = ({children}) => {
    return (
        <StyledParagraph>
            {children}
        </StyledParagraph>
    )
}

export default Typography;

これでいける

子コンポーネントにclassNameプロパティを追加する

typography.tsx

import styled from 'styled-components';

const StyledParagraph = styled.p`
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
`

type Props = {
    children: ReactNode
    className?:string
}

const Typography:React.FC<Props> = ({children,className}) => {
    return (
        <StyledParagraph className={className}>
            {children}
        </StyledParagraph>
    )
}

export default Typography;