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

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

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

Answer 1

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

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