こんにちは、
React(Gatsby)でStyled-Componentsを使用してcssのレイアウトをしています。
Reactで以下のHTMLを出力しています。
html
1<div class="post-1">あああああ</div> 2<div class="post-2">いいいいい</div> 3<div class="other">ううううう</div>
下記のようにStyled-Components で正規表現を用いて書けるかと思い、
『post-1』、『post-2』に赤色のテキストを適用させようとしておりますが、post-1、post2ともに適用されない状態です。
js
1export const PostDescription = styled.div` 2 div[class^="post"] { 3 color: red; 4 } 5`
次のように、正規表現を用いずにclassをした場合は問題なく、赤のテキストがpost-1だけに適用されました。
js
1export const PostDescription = styled.div` 2 .post-1 { 3 color: red; 4 } 5` 6 7---
調べたこと
- cssで正規表現の利用法
⇨次の記事を参考にdivタグにおいて、class名が前方一致の正規表現div[class^="post"]
を作りました。
https://pisuke-code.com/css-how-to-use-regexp/
- Styled-Componentsでは正規表現が利用できるのかを調査
⇨公式をregexなどで探していますが、記載している箇所を見つけられず利用できるのか不明です。
ほかにやった方がいいことなど教えていただければ幸いです。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/04/09 04:25
2022/04/09 04:26