Question

我在很多Material-ui代码中都看到过，他们在反应样式组件中使用伪选择器。我以为自己会尝试做，但我无法使其正常工作。我不确定自己在做错什么，甚至不确定是否可行。

我正在尝试制作一些CSS，以使此元素相对固定的标头偏移。

import React from 'react';
import { createStyles, WithStyles, withStyles, Typography } from '@material-ui/core';
import { TypographyProps } from '@material-ui/core/Typography';
import GithubSlugger from 'github-slugger';
import Link from './link';

const styles = () =>
  createStyles({
    h: {
      '&::before': {
        content: 'some content',
        display: 'block',
        height: 60,
        marginTop: -60
      }
    }
  });

interface Props extends WithStyles<typeof styles>, TypographyProps {
  children: string;
}

const AutolinkHeader = ({ classes, children, variant }: Props) => {
  // I have to call new slugger here otherwise on a re-render it will append a 1
  const slug = new GithubSlugger().slug(children);

  return (
    <Link to={`#${slug}`}>
      <Typography classes={{ root: classes.h }} id={slug} variant={variant} children={children} />
    </Link>
  );
};

export default withStyles(styles)(AutolinkHeader);

Answer 1

正如@Eran Goldin 所说，检查您的 content 属性的值并确保将其设置为字符串 ""。很可能，你正在做这样的事情：

'&::before': {
  content: '',
  ...
}

在输出样式表中根本没有设置 content 属性

.makeStyles-content-154:before {
  content: ;
  ...
}

在 Material-UI 样式对象中，字符串的内容是 css 值，包括双引号，修复它只需写

'&::before': {
  content: '""', // "''" will also work.
  ...
}

Answer 2

我发现content属性需要像这样被双引号

const styles = () =>
  createStyles({
    h: {
      '&::before': {
        content: '"some content',
        display: 'block',
        height: 60,
        marginTop: -60
      }
    }
  });

然后一切都按预期工作

具有material-ui的CSS伪选择器

2 个答案: