具有material-ui的CSS伪选择器 [英] css pseudo selectors with material-ui

查看:75
本文介绍了具有material-ui的CSS伪选择器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I have seen in a lot of the material-ui code that they use pseudo selectors in their react styled components. I thought I would try to do it myself and I cannot get it to work. I'm not sure what I am doing wrong or if this is even possible.

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

I am trying to make some css that will offset this element against the fixed header.

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);

推荐答案

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

I found out that the content attribute needed to be double quoted like this

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

然后一切都按预期工作

这篇关于具有material-ui的CSS伪选择器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆