styled-componentsのComponentの継承にはclasNameを付ける必要がある

Components自体を継承してそれにStyleをoverrideする

継承元のコンポーネントにclassNameを明示的に書く必要がある

code:ts

interface RequiredProps {

className?: string;

}

const Required: React.FC<RequiredProps> = ({ className }) => (

<P className={className}>＊</P> // classNameが必要

)

export const P = styled.span`

font-size: 10px;

margin-left: 5px;

const R = styled(Required) // ←この括弧の中がP`なら普通のoverrideなので↑こんなことを考えなくても大丈夫

margin-bottom: 10px;

// 使う側

<R />

rnはstyle=をつける

If you are using react-native keep in mind to use style instead of className.

styled.Viewだとtype errになるのでstyled(View)のようにする