JSS 样式顺序不正确 - Material-UI

Question

我遇到的情况是，我的 MUI 组件库的 JSS 样式（样式 A）正在取代消费者网站提供的样式（样式 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()）注入样式表的顺序。

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

有没有一种方法可以规定 MUI 样式 < 组件库样式 < 消费者样式的顺序，而无需声明每个 withStyles 的索引？

Answer 1

在我的情况下，导入顺序不正确。所以 JSS 样式顺序不正确，主题被覆盖。

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