Reactjs 如何使基于属性的CSS样式与材质UI和JSS中的本地规则引用一起工作？

我无法找到一种方法使a（在下面的代码中名为

“&$value”

）与完全协同工作。当为引用其他本地规则的规则定义CSS属性时，使用接受

StyleProperties

对象并返回CSS值的函数定义的任何CSS属性都将被忽略；请参见代码和注释：

import*as React from“React”；
从“@material ui/core/styles”导入{Theme，makeStyles，createStyles}”；
从“@material ui/core/CssBaseline”导入CssBaseline；
从“clsx”导入clsx；
类型StyleProperties={
规模：数量；
};
const useStyles=makeStyles（（主题：主题）=>
创建样式({
root：（props:StyleProperties）=>{
常量大小=`${2.0*props.scale}rem`；
返回{
职位：“相对”，
背景色：theme.palete.background.paper，
边框：`1px solid${theme.palete.divider}`，
宽度：大小，
高度：尺寸，
“&>div”：{
位置：“绝对”
}
};
},
价值：{
颜色：theme.palete.text.primary，
宽度：“100%”，
高度：“100%”，
textAlign：“居中”，
线宽：（props:StyleProperties）=>`${2.0*props.scale}rem`
},
静态：{
“&$value”：{
//以下是可以的
颜色：theme.palette.action.disabled，
背景色：theme.palette.action.disabledBackground，
//忽略
边框：（道具：样式属性）=>
`${0.0625*props.scale}rem实心红色`
//在第行上方注释掉，并取消注释以下内容，以查看预期输出
//如果值2.0是通过道具传入的。
//边框：“${0.0625*2.0}rem实心红色”，
}
}
})
);
类型值属性={
值：字符串；
规模：数量；
};
函数值（props:ValueProperties）{
常量类=使用样式（道具）；
返回{props.value}；
}
类型CellProperties={
静态：布尔；
规模：数量；
};
功能单元（道具：单元属性）{
常量类=使用样式（道具）；
返回(
);
}
导出默认函数App（）{
返回(
);
}

我还尝试在

静态

和

'&$value'

规则级别而不是CSS属性级别使用接受我的

样式属性

对象的函数，但这两种方法都完全忽略了

'&$value'

中的所有CSS定义

使用上述代码时没有错误消息或警告输出。在搜索了MaterialUI和JSS的文档之后，我没有发现任何与此场景相关的已知限制

最终，基于

StyleProperties

和材质UI

Theme

提供的值定义CSS是我的应用程序接口的严格要求。因此，如果您想建议另一种方法来声明基于层次结构的样式规则，请记住这一点

---

编辑：根据要求，我提供了一个代码沙盒来演示这个问题：--请参见第43行的

边框

定义以及它未被应用的事实。

问题是您正在从

单元格和
值
调用
useStyles
。这将导致为
值
规则生成两个不同的类，并为
静态
规则生成两个不同的类。为
单元格
生成的
值
类被应用于
单元格
的
静态
类中的
“&$value”
引用，但应用于
值
元素的是为
值
生成的
类，因此，
static
类中的后代选择器不匹配它

您可以通过在一个位置调用
useStyles
并将
value
类名向下传递到
value
元素来解决此问题，如下例所示：

import*as React from“React”；
从“@material ui/core/styles”导入{Theme，makeStyles，createStyles}”；
从“@material ui/core/CssBaseline”导入CssBaseline；
从“clsx”导入clsx；
类型StyleProperties={
规模：数量；
};
const useStyles=makeStyles（（主题：主题）=>
创建样式({
root：（props:StyleProperties）=>{
常量大小=`${2.0*props.scale}rem`；
返回{
职位：“相对”，
背景色：theme.palete.background.paper，
边框：`1px solid${theme.palete.divider}`，
宽度：大小，
高度：尺寸，
“&>div”：{
位置：“绝对”
}
};
},
价值：{
颜色：theme.palete.text.primary，
宽度：“100%”，
高度：“100%”，
textAlign：“居中”，
线宽：（props:StyleProperties）=>`${2.0*props.scale}rem`
},
静态：{
“&$value”：{
颜色：theme.palette.action.disabled，
背景色：theme.palette.action.disabledBackground，
边框：（道具：样式属性）=>
`${0.0625*props.scale}rem实心红色`
}
}
})
);
类型值属性={
值：字符串；
规模：数量；
类名：string；
};
函数值（props:ValueProperties）{
返回{props.value}；
}
类型CellProperties={
静态：布尔；
规模：数量；
};
功能单元（道具：单元属性）{
常量类=使用样式（道具）；
返回(
);
}
导出默认函数App（）{
返回(
);
}

请提供一份复制您的问题的报告。@RyanCogswell补充道——这很有意义，确实解决了我的问题，谢谢。某些样式（如颜色和背景色）仍应用于嵌套在静态单元格中的元素，这一事实使我无法找到问题的原因。@nxn行为t