不正确的 JSS 样式顺序 - Material-UI答案

【问题标题】：Incorrect JSS style order - Material-UI不正确的 JSS 样式顺序 - Material-UI
【发布时间】：2019-04-29 20:32:17
【问题描述】：

我的 MUI 组件库的 JSS 样式（Styles A）正在取代消费者网站提供的那些（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() 函数）注入样式表的顺序。

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

有没有办法在不为每个 withStyles 声明索引的情况下规定 MUI 样式

【问题讨论】：

找到解决方案了吗？
@JeevaJsb 这是不久前的事了，但我认为我们在上述解决方法之外没有找到解决方案。未在更高版本的 MUI 中进行调查
我通过更改组件中的导入顺序解决了这个问题
@JeevaJsb 这是有道理的；您应该将此添加为答案

标签： reactjs themes material-ui jss css-in-js

【解决方案1】：

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

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

【讨论】：