問題タブ [styled-components]

Reactの場合、次のようなものにstyled-components代わるものはありますか

(ネストされた条件付きセレクターを使用して、同じ DOM ですべてのアニメーションを確実に実行しますが、異なる z-index レベルは適切に実行/完了します)?

(タイトルの長さについて申し訳ありません。styled-components タグを作成する担当者はいません。)

styled-componentsで兄弟セレクターを含むルールをどのように変換しますか? （生成されたクラス名によるスタイリングの他のフレーバーにも関係すると思います）

スタイル付きコンポーネントでホバーを処理する最良の方法は何ですか? ホバーするとボタンが表示されるラッピング要素があります。

コンポーネントに何らかの状態を実装し、ホバー時にプロパティを切り替えることができましたが、styled-cmponents でこれを行うためのより良い方法があるかどうか疑問に思っていました。

次のようなものは機能しませんが、理想的です。

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

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

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

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

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

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

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

ありがとう！

次のようなエラーが発生しています (iOS でテスト済み):

null のプロパティ 'getScrollableNode' を読み取ることができません

react-native のAnimated along styled-componentsスタイリング ツールを、react および react-nativeに使用しようとしている間。

<Logo />私が作成したコンポーネントの例を次に示します。

次に、このコンポーネントを、アニメーションを適用したいシーンの 1 つにインポートします。

そして、これにより上記のエラーが発生し、グーグルで検索してみましたが、それが何であるかについての説明を見つけることができませんでした。必要に応じて、さらに詳細をリクエストしてください。

関連する GitHub の問題: https://github.com/styled-components/styled-components/issues/341