如何使用Material-UI makeStyles实现类及before、after伪元素统一样式

可以通过Material-UI的makeStyles实现你需要的样式效果，无需单独拆分定义before和after选择器。

makeStyles 支持使用&符号指代当前生成的类名，你可以直接通过嵌套选择器的写法把原CSS规则整合进去即可，完整写法如下：

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  hexagon: {
    // 同时匹配自身、before伪元素、after伪元素，和你给出的原生CSS规则完全对齐
    '&, &::before, &::after': {
      width: 67,
      height: 116,
      borderRadius: '18%/5%',
    },
    // 单独给伪元素加必备属性
    '&::before, &::after': {
      content: '""',
      position: 'absolute',
      // 补充你实现六边形需要的transform、background等属性即可
    },
    position: 'relative'
  }
});

组件内使用时，只需调用const classes = useStyles()，给对应元素绑定className={classes.hexagon}即可生效。

注意事项 #

• 必须显式给伪元素声明content属性，哪怕值为空字符串，否则伪元素不会正常渲染
• 如果你要实现完整六边形效果，只需给两个伪元素分别添加transform: rotate(60deg)和transform: rotate(-60deg)，即可完成基础六边形结构

内容的提问来源于stack exchange，提问作者DiWeera98