MUI를 사용하는 CSS 의사 실렉터

MUI를 사용하는 CSS 의사 실렉터

리액션 스타일의 컴포넌트에 유사 셀렉터를 사용하는 것을 MUI 코드에서 많이 볼 수 있습니다.내가 직접 해보려고 했는데 잘 안 되네.나는 내가 무엇을 잘못하고 있는지, 이것이 가능한 것인지 잘 모르겠다.

이 요소를 고정 헤더에 대해 오프셋하는 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);

콘텐츠 속성은 이렇게 이중인용해야 한다는 것을 알게 되었습니다.

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

그리고 모든 것이 예상대로 되었다.

@Eran Goldin이 말한 바와 같이 다음 값을 확인합니다.content속성이 문자열로 설정되어 있는지 확인합니다.""아마 다음과 같은 일을 하고 있을 겁니다.

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

그렇다고 해서content출력 스타일시트의 속성

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

Material-UI 스타일 객체에서 문자열의 내용은 이중 따옴표를 포함한 css 값입니다.이 값을 수정하면 간단하게 쓸 수 있습니다.

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

명시적으로 높이를 설정할 필요 없이

위의 솔루션에는 명시적인 높이가 필요합니다.높이를 동적으로 하려면 다음과 같은 작업을 수행할 수 있습니다.

  &::after {
    content: '_'; // Any character can go here
    visibility: hidden;
  }

언급URL : https://stackoverflow.com/questions/53768260/css-pseudo-selectors-with-mui