web-dev-qa-db-ja.com

スタイル付きコンポーネントで使用される疑似クラスの前後

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

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

&:hover {}

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

これは、前後などのすべての擬似要素に対して機能しますか？

私は&:beforeおよび&:after戦略をいくつかのやや複雑な例で使用しようとしましたが、私の例で何か問題が発生したか、またはうまくいかないために試行が機能しないかどうかわかりませんそのように動作します。

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

reactjspseudo-classstyled-components
20
archae0pteryx

styled-componentsの疑似セレクターは、CSSの場合と同じように機能します。 （むしろ、Sass）動作していないものは、おそらく特定のコードの問題ですが、実際のコードを見ずにデバッグするのは困難です！

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

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

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

コードを投稿していただければ、特定の問題をデバッグできるようになるでしょう。

49
mxstbr

これにより、divの中央に三角形が印刷されます。

const LoginBackground = styled.div`
  & {
    width: 30%;
    height: 75%;
    padding: 0.5em;
    background-color: #f8d05d;
    margin: 0 auto;
    position: relative;
  }
  &:after {
    border-right: solid 20px transparent;
    border-left: solid 20px transparent;
    border-top: solid 20px #f8d05d;
    transform: translateX(-50%);
    position: absolute;
    z-index: -1;
    content: "";
    top: 100%;
    left: 50%;
    height: 0;
    width: 0;
  }
`;
0
Nalan Madheswaran