带有 MUI 的 CSS 伪选择器

Posted 2023-02-22

【中文标题】带有 MUI 的 CSS 伪选择器

【英文标题】：CSS pseudo selectors with MUI

【发布时间】：2019-05-15 01:08:54

【问题描述】：

我在很多 MUI 代码中看到他们在他们的 react 样式组件中使用伪选择器。我以为我会尝试自己做，但我无法让它发挥作用。我不确定我做错了什么，或者这是否可能。

我正在尝试制作一些 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】：

我发现内容属性需要像这样被双引号引起来

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

然后一切都按预期进行

【讨论】：

content: ' "some content" '，你错过了封闭式报价，但无论如何谢谢，你拯救了我的一天。

这对于空的伪元素也很重要。即content: '""'

为此浪费了 2 个小时。我正在使用内容：'blabla'，但它不起作用?‍♂️

好吧，内容浪费了我的时间。

谢谢。你拯救了我的一天。

【参考方案2】：

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

'&::before': 
  content: '',
  ...

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

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

在Material-UI style object中，字符串的内容是css值，包括双引号，修复简单写

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