5

我的 MUI 组件库 ( Styles A ) 的 JSS 样式正在取代消费者网站 ( Styles B ) 提供的样式。

样式 A 旨在被样式 B 覆盖。

举这个最小的例子：

样式 A（在组件库中）

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()函数）注入样式表的顺序。

css订单截图

虽然这可以通过在 withStyles 选项中传递一个索引来修复（如此处所述），即：export default withStyles(styles, {index: 1})(Page);. 这似乎不是图书馆环境中最有效/最有效的方法。

有没有办法在不为每个 withStyles 声明索引的情况下指定 MUI 样式 < 组件库样式 < 消费者样式的顺序？

4

1 回答 1

0

在我的场景中，导入顺序不正确。所以 JSS 样式顺序不正确，主题被覆盖。

我们需要确定应该应用哪种样式。因此，基于此我们需要更改导入顺序。这将有助于解决问题。

于 2020-01-03T10:04:01.190 回答