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

Question

当前行为

将道具传递给 makeStyles() 不起作用CSS combinators

预期行为

应该与CSS combinators

重现步骤

脚步：

1. 创建风格道具

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

2. 将 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',
    },
}));

3. 传球道具

    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

标签： reactjstypescriptmaterial-ui

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