样式不适用于带有makeStyles（）material-ui的CSS组合器+伪类

Question

当前行为?

将道具传递给makeStyles（）不适用于CSS combinators

预期行为?

应与CSS combinators

一起使用

复制步骤

步骤：

1. 创建样式道具

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

1. 将道具传递给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',
    },
}));

1. 传递道具

    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"
  ]
}

• 材料界面| v4.11.0
• 反应| v16.13.1
• 浏览器|版本83.0.4103.116（正式版本）（64位）
• TypeScript | 3.7.2

Answer 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',
    },
}));```