Fluent UI Card组件hover样式报错：'string'不可分配给'undefined'

错误原因 #

你的代码里存在两处无效的CSS值，触发了Fluent UI makeStyles的TypeScript类型校验失败，进而导致:hover区块内所有属性都报类型错误：

• background: "#FF"：十六进制颜色值需要3位或6位字符，#FF是不合法的格式
• boxShadow: 'another value here'：这是无效的占位文本，不符合CSS box-shadow的语法规范

Fluent UI的样式系统对属性值有严格的类型约束，一处无效值会引发整个嵌套区块的类型报错，所以你看到所有:hover内的属性都提示'type string is not assignable to type undefined'。

正确的写法 #

1. 修正所有无效的CSS属性值，确保符合标准语法
2. 如果你要修改hover时的边框颜色，需要同时设置边框的样式和宽度（默认Card可能没有边框，仅设置颜色不会生效）

修正后的代码示例：

const useStyles = makeStyles({
    card: {
        width: '100px',
        height: '100px',
        // 可选：初始化默认边框，让hover时的颜色变化更明显
        border: '1px solid transparent',
        "&:hover": {
            borderRadius: "20px",
            background: "#FFFFFF", // 合法的十六进制颜色值
            boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)', // 合法的阴影参数
            borderColor: '#106ebe' // 你需要的hover边框颜色
        },
    },
});

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