使用樣式組件的僞類之前和之後

將:before和:after僞類應用於樣式化組件的正確方法是什麼？使用樣式組件的僞類之前和之後

我知道，你可以使用

&:hover {}

到:hover僞類適用於一個風格的分量。

這是否適用於像之前和之後的所有僞元素？

我已經嘗試使用&:before和&:after戰略與一些相當複雜的例子，我不知道如果我的企圖不工作，因爲我有我的例子有問題，或者它只是不這樣工作。

有人對此有所瞭解嗎？謝謝。

來源

2017-08-24 archae0pteryx

styled-components中的僞選擇器就像在CSS中一樣工作。（或更確切地說，Sass）不管什麼不工作都可能是你的特定代碼中的一個問題，但是如果沒有看到實際的代碼就很難調試！

下面是如何使用一個簡單的:after一個例子：

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

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

如果您發佈的代碼，我很可能能夠幫助調試您的問題！

來源

2017-08-24 22:31:13 mxstbr

這沒有必要。感謝您澄清！我只是需要確定它是否在我的末端...... =）我不確定'''＆：before'''和'''：:''''是否正在工作。我無法通過谷歌找到明確的答案...所以...謝謝！ – archae0pteryx

不用擔心，樂意幫忙！ – mxstbr

@mxstbr嗨，mxstbr！我在動態呈現Pseudo-before內容時遇到問題。我做錯了嗎？或者它是風格化的 - 組件不支持。 https://stackoverflow.com/questions/46339034/how-to-render-pseudo-before-content-dynamically-in-styled-component/46339194#46339194 – hytm

使用樣式組件的僞類之前和之後

回答

相關問題