1

アプリにテーマを設定したい Button コンポーネントがあります。そのために、私は ThemeableButton.js を作成し、styled(Button) を使用して Button コンポーネントをオーバーライドしたいと考えました。

私はインライン スタイリングを使用していないので、私の Button コンポーネントはスタイルを定義しておらず、styled-components について何も知らないという考え方です。

サードパーティのコンポーネントをオーバーライドするとうまくいくと思いましたが、うまくいきません。ここに webpackbin の例を作成しました。

私の問題は ThemeableButton.js にあります。ここ：

    const StyledButton = styled(Button)`
      background: ${(props) => props.theme.primaryColor };
      border: 2px solid ${(props) => props.theme.borderColor };
      color: ${(props) => props.theme.textColor };
    `;

Button.js コンポーネントをオーバーライドしてスタイルの小道具を追加するために、これが機能することを期待していました。もちろん、このようにStyledButtonを定義すると

    const StyledButton = styled.button

それは機能しますが、アイデアは私のコンポーネントをオーバーライドすることです。スタイル付きコンストラクターを使用して定義したくない、より複雑なコンポーネントがあります。

これを機能させる方法のアイデアはありますか?

ありがとう！

4

1 に答える 1