材质ui中的目标伪选择器

Question

我想知道是否有一种方法可以在材质ui中定位psedo选择器（::before, ::after）？例如，在这样的组件中？

const useStyles = makeStyles((theme) => ({
  root: {
    textAlign: 'center',
    '&::before': {
      content: '"blabla"'
    },
    '&::after': {
      content: '"blabla"'
    },
    ':before': {},
    after: {}
  }
}));

function App(props) {
  const classes = useStyles();
  return (
    <Typography
      className={{ root: classes.root, before: classes.before, after: classes.after }}>
      {props.children}
    </Typography>
  );
}

Answer 1

我已经创建了this sandbox project，您可以检查一下，情况是否正常，如果我缺少一些可以理解您的问题的信息，请纠正我的问题

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";

const useStyles = makeStyles(theme => ({
  root: {
    textAlign: "center",
    "&::before": {
      content: '"-"'
    },
    "&::after": {
      content: '"-"'
    }
  }
}));

export default function App(props) {
  const classes = useStyles();
  return (
    <Typography className={classes.root} {...props}>
      Hello
    </Typography>
  );
}

我认为您以错误的方式使用了className道具，您必须传递字符串，而不是对象。classes道具需要一个对象，我们通常在组件上使用暴露了类名的类道具来覆盖其内部样式，例如，在Typography组件可以覆盖这样的根元素样式的情况下，因此classes和[ classNames是Materil-ui中的两件不同的东西，但有时两者都提供相同的解决方案。

我用第二种解决方案又创建了一个Sandbox project

export default function App(props) {
  const classes = useStyles();
  return (
    <Typography classes={{ root: classes.root }} {...props}>
      Hello
    </Typography>
  );
}