无法定位 :before JSS 中的伪选择器

Question

我正在尝试定位我页面上某个元素的伪选择器。我正在为这个项目试用 JSS，到目前为止我是它的超级粉丝，但对它还是很陌生。我在选择 :after selected with JSS 时遇到问题。这可能吗，因为我认为这是在阅读文档时。

这是我的标记：

<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 的人能帮忙，那就太好了！

Answer 1

你做的是对的。除了两件事：

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

Answer 2

似乎也是添加这个的好地方...

如果您想向 content: 添加一个符号（如 "），那么这对我有用：

// symbol
const $quoteSym = '"';

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

看起来有点老套，但封装 method/order，关于您使用的引号类型，似乎有所不同。

无法定位 :before JSS 中的伪选择器

Can't target :before Pseudo selector in JSS

javascript

styling

reactjs