不正确的JSS样式订单-材料-UI
不正确的JSS样式订单-材料-UI
提问于 2018-11-28 01:48:32
我遇到了这样的情况:我的MUI组件库的JSS样式(样式A、)正在取代消费者网站(Styles )提供的那些样式。
样式A打算被样式B覆盖。
以这个最小的例子为例：
样式--(在组件库中)
const styles = theme => ({
title: {
color: 'red'
}
});
const CollapsibleCard = ({classes, title}) => (
<Typography className={classes.title} variant={"h6"}>
{title}
</Typography>
);
export default withStyles(styles)(CollapsibleCard);样式B (在消费网站)
const styles = {
title: {
color: 'green'
},
};
const Page = ({classes}) => (
<CollapsibleCard
title={"Testing"}
classes={{
title: classes.title
}}
/>
);
export default withStyles(styles)(Page);导致元素的级联样式为：
.CollapsibleCard-title-160 {
color: red;
}
.Page-title-157 {
color: green;
}其中，来自样式B的绿色被样式A的红色覆盖。
编辑：这个顺序背后的原因似乎是MUI (特别是withStyle()函数)注入样式表的顺序。
虽然可以通过在here选项中传递索引来修复(如注意到的withStyles )，即：export default withStyles(styles, {index: 1})(Page);。在库上下文中，这似乎不是最有效的方法。
有没有办法在不声明每个withStyles的索引的情况下规定MUI样式的顺序<组件库样式<消费者样式？
回答 1
Stack Overflow用户
发布于 2020-01-03 10:04:01
在我的场景中，导入顺序是不正确的。因此，JSS样式顺序是不正确的，主题被重写。
我们需要确定应该采用哪种样式。因此，基于此，我们需要更改进口订单。这将有助于解决这一问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53510888
复制相关文章
相似问题
腾讯云开发者
