样式不适用于 css 组合器 + 带有 makeStyles() material-ui 的伪类答案

【问题标题】：Style is not applied to css combinators + pseudo classes with makeStyles() material-ui样式不适用于 css 组合器 + 带有 makeStyles() material-ui 的伪类
【发布时间】：2020-11-04 13:29:50
【问题描述】：

当前行为????

将 props 传递给 makeStyles() 不适用于 CSS combinators

预期行为????

应该使用CSS combinators

复制步骤

步骤：

创建样式道具

export interface StyleProps {
    width: string;   //Tried number but same
}

将 props 传递给 makeStyle()

const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
   card: {
        //Some other styles ...
        '&:hover $filledBar': props => ({
            width: props.width,    //This doesn't work
            transition: '0.4s ease-out'
        })
   },
   filledBar: {
        position: 'absolute',
        top: '0rem',
        zIndex: 3,
        width: '0rem',
        height: '100%',
        background: 'linear-gradient(90deg, rgba(0,154,217,1) 0%, rgba(217,147,0,1) 65%, rgba(255,186,0,1) 100%)',
        transition: '0.6s ease-out',
    },
}));

传球道具

    const styleProps: StyleProps = { width: '12rem' }    //Tried number but same
    const classes = useStyles(styleProps);

环境????

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

材质-UI | v4.11.0
反应 | v16.13.1
浏览器 |版本 83.0.4103.116（正式版）（64 位）
打字稿 | 3.7.2

【问题讨论】：

标签： reactjs typescript material-ui

【解决方案1】：

我遇到了类似的问题，然后这样解决了：

const useStyles = makeStyles((theme) => ({
   card: (props: StyleProps) => ({
        //Some other styles ...
        '&:hover $filledBar': {
            width: props.width, 
            transition: '0.4s ease-out'
        }
   }),
   filledBar: {
        position: 'absolute',
        top: '0rem',
        zIndex: 3,
        width: '0rem',
        height: '100%',
        background: 'linear-gradient(90deg, rgba(0,154,217,1) 0%, rgba(217,147,0,1) 65%, rgba(255,186,0,1) 100%)',
        transition: '0.6s ease-out',
    },
}));```

【讨论】：