web-dev-qa-db-fra.com

Impossible de cibler: avant le pseudo-sélecteur dans JSS

J'essaie de cibler le pseudo-sélecteur après d'un élément sur ma page. J'essaie JSS pour ce projet et je suis un grand fan jusqu'à présent, mais encore très nouveau pour lui. J'ai des problèmes pour sélectionner le: après avoir sélectionné avec JSS. Est-ce possible parce que je pensais que c'était lors de la lecture des documents.

Ceci est ma marque:

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

et mon JSS ressemble à ceci:

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
    }
}

si quelqu'un qui connaît JSS pouvait aider, ce serait génial!

javascriptreactjsstyling
28
Brady

Ce que tu as fait est juste. Sauf pour 2 choses:

1) Erreur de syntaxe: vous manquez une virgule après l'entrée fontFamily: fonts.family.primary

2) Le contenu doit être une chaîne entre guillemets doubles qui à son tour doit être placée entre guillemets simples. Ainsi, un contenu vide serait content: '""',

Essayez donc simplement ce qui suit:

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

Semble être un bon endroit pour ajouter cela aussi ...

Si vous souhaitez ajouter un symbole (comme un ") au content: alors ça a fait l'affaire pour moi:

// symbol
const $quoteSym = '"';

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

Semble un peu hacky mais la méthode/l'ordre d'encapsulation, en ce qui concerne le type de citations que vous utilisez, semble faire une différence.

3
Harry Lincoln