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

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

0 голосов
/ 28 ноября 2018

У меня есть ситуация, когда стили JSS моей библиотеки компонентов MUI ( 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 перезаписывается краснымиз стилей А.

Редактировать : Причиной этого порядка является порядок, в котором MUI (в частности, функция withStyle()) внедряет таблицы стилей.

css order screenshot

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

Есть ли способ диктовать порядок стилей MUI <Стили библиотеки компонентов <Стили потребителя, не объявляя индекс для каждого withStyles</p>

...