псевдо-селекторы css с помощью Material-UI - PullRequest
Новая
       7

псевдо-селекторы css с помощью Material-UI

0 голосов
/ 13 декабря 2018

Я видел во многих кодах 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);

1 Ответ

0 голосов
/ 14 декабря 2018

Я обнаружил, что атрибут содержимого должен был заключаться в двойные кавычки, как это 

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

, а затем все работало как ожидалось

...