如何将普通CSS类重构为Material-UI支持的样式写法

• 选择器触发逻辑错位：原CSS的触发规则是「父级.popover__wrapper被鼠标悬停时，内部的.popover__content才显示」，你之前把:hover状态写在了popover__content自身的样式块里，变成只有鼠标已经碰到隐藏状态下的弹层本身才会触发显示，根本没法正常弹出。
• 漏了基础定位样式：原CSS里.popover__wrapper的position: relative是弹层能相对于触发元素定位的基础，你完全没有定义这个类的样式，会导致弹层的绝对定位直接绑定到页面根节点，位置完全错乱。
• 细节属性缺失/不规范：z-index值不需要加字符串引号、transition属性前多了多余空格、伪元素漏了边框、定位、空内容占位等核心属性，之前漏写的背景色、内边距、阴影、文本对齐规则也没有补上。

// MUI v5从@mui/styles导入，v4从@material-ui/styles导入
import { makeStyles } from '@mui/styles';

const usePopoverStyles = makeStyles({
  // 对应原CSS的 .popover__wrapper 类
  popoverWrapper: {
    position: 'relative',
    // 嵌套实现原CSS的 .popover__wrapper:hover .popover__content 选择器逻辑
    '&:hover $popoverContent': {
      zIndex: 10,
      opacity: 1,
      visibility: 'visible',
      transform: 'translate(0, -20px)',
      transition: 'all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97)',
    },
  },
  // 对应原CSS的 .popover__content 类
  popoverContent: {
    opacity: 0,
    visibility: 'hidden',
    position: 'absolute',
    // 按实际需求调整left偏移值，你之前写的-150px可以保留
    left: '-150px',
    transform: 'translate(0, 10px)',
    backgroundColor: '#bfbfbf',
    padding: '1.5rem',
    boxShadow: '0 2px 5px 0 rgba(0, 0, 0, 0.26)',
    // 之前写的width: "100%" 和原CSS的auto不一致，按需调整即可
    width: 'auto',
    textAlign: 'center',
    // 对应原CSS的 .popover__content:before 伪元素
    '&::before': {
      position: 'absolute',
      zIndex: -1,
      content: '""',
      right: 'calc(50% - 10px)',
      top: '-8px',
      borderStyle: 'solid',
      borderWidth: '0 10px 10px 10px',
      borderColor: 'transparent transparent #bfbfbf transparent',
      transitionDuration: '0.3s',
      transitionProperty: 'transform',
    },
  },
})

• 如果用MUI v5的styledAPI写样式，嵌套选择器的逻辑完全一致，不需要额外调整。
• 数值型属性（比如zIndex、opacity）直接写数字即可，不需要额外套引号，MUI的样式引擎会自动兼容。
• 实现的效果和原纯CSS逻辑完全一致：鼠标移到触发区域（wrapper）时弹层平滑显示，移开后自动隐藏，弹层内部放置的按钮、折叠组件都能正常响应交互，不会出现z-index过高阻塞事件的问题。

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