web-dev-qa-db-ja.com

JSSの疑似セレクターの前にターゲットを設定できません

ページ上の要素のafter擬似セレクターをターゲットにしようとしています。私はこのプロジェクトのためにJSSを試していますが、これまでのところ大ファンですが、まだ非常に新しいものです。 JSSで：afterを選択すると問題が発生します。ドキュメントを読んでいるときだと思ったので、これは可能ですか？.

これは私のマークアップです：

<Link to="about" className={classes.link}>About</Link>

私のJSSは次のようになります。

link: {
    position: 'relative',
    fontFamily: fonts.family.primary
    '&:before': {
        content: ' ',
        position: 'absolute',
        bottom: 0,
        left: 50,
        width: '100%',
        height: '1rem',
        display: 'block',
        background:styles.colors.white
    }
}

jSSに精通している人が助けてくれたら、それは素晴らしいことです！

javascriptreactjsstyling
28
Brady

あなたがしたことは正しい。 2つのことを除いて：

1）構文エラー：エントリfontFamily: fonts.family.primaryの後にカンマがありません

2）内容は、二重引用符で囲まれた文字列である必要があり、二重引用符で囲まれている文字列は、単一引用符で囲まれている必要があります。したがって、空のコンテンツはcontent: '""',になります

以下を試してください：

link: {
    position: 'relative',
    fontFamily: fonts.family.primary,
    '&:before': {
        content: '""',
        position: 'absolute',
        bottom: 0,
        left: 50,
        width: '100%',
        height: '1rem',
        display: 'block',
        background:styles.colors.white
    }
}
69
Nishanth Matha

これも追加するのに良い場所のようです...

シンボルを追加する場合（"）content:その後、これは私のためにトリックをしました：

// symbol
const $quoteSym = '"';

// jss class
quote: {
   color: 'white',
   position: 'relative',
   padding: '2rem',
   '&:before': {
      display: 'inline-block',
      content: `'${$quoteSym}'`,
   },
},

少しハックに見えますが、カプセル化の方法/順序は、どのタイプの引用符を使用するかに関して、違いがあるようです。

3
Harry Lincoln