56

:beforeスタイル付きコンポーネントに:after疑似クラスを適用する適切な方法は何ですか?

私はあなたが使用できることを知っています

&:hover {}

:hoverスタイル付きコンポーネントに疑似クラスを適用します。

これは前後のようなすべての疑似要素で機能しますか?

&:beforeかなり複雑な例でand戦略を使用しようとし&:afterましたが、例に何か問題があるためにうまくいかないのか、それともうまくいかないのかわかりません。

誰かがこれについて洞察を持っていますか？ありがとうございました。

4

5 に答える 5

130

疑似セレクターstyled-componentsは、CSS と同じように機能します。(というか、Sass) 動作しないものは、特定のコードの問題である可能性がありますが、実際のコードを見ずにデバッグするのは困難です!

シンプルな を使用する方法の例を次に示します:after。

const UnicornAfter = styled.div`
  &:after {
    content: " ";
  }
`;

<UnicornAfter>I am a</UnicornAfter> // renders: "I am a "

コードを投稿すると、特定の問題のデバッグに役立つ可能性があります。

于 2017-08-24T22:31:13.177 に答える
3

これは良い簡単な答えです：

https://stackoverflow.com/a/45871869/4499788 by mxstbr

しかし、より複雑なロジックを必要とする要素については、次のアプローチを好みます。

const Figure = styled.div`
  ${Square}:before, 
  ${Square}:after,
  ${Square} div:before, 
  ${Square} div:after {
    background-color: white;
    position: absolute;
    content: "";
    display: block;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
  }
`;
于 2020-10-07T10:04:31.813 に答える