Неправильный порядок стилей JSS - Material-UI

У меня есть ситуация, когда стили JSS моей библиотеки компонентов MUI (Стили А) заменяют стили, предоставленные веб-сайтом потребителя (Стили B).

Стили 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()) внедряет таблицы стилей.

Хотя это можно исправить (как указано в здесь), передав индекс в параметрах withStyles, то есть: export default withStyles(styles, {index: 1})(Page);. Это не кажется наиболее эффективным / действенным подходом в библиотечном контексте.

Есть ли способ диктовать порядок стилей MUI <стили библиотеки компонентов <потребительские стили без объявления индекса для каждого withStyles?