Как объединить обычный класс JSS с функцией переопределения классов Material-UI, используя имена классов

Question

Я пытаюсь назначить несколько классов для элемента в React, используя пакет classnames , наряду с подходом переопределения классов для Material-UI .

Здесь - это пример из документации MUI, где они используют имена классов для назначения нескольких классов элементу (разверните, чтобы увидеть исходный код в примере).

Что я пытаюсь сделатьdo объединяет один обычный класс, который я создал, с JSS, и тот, который должен переопределить класс MUI.Вот классы:

const styles = {
    insetListItemText: { // This will be used to target MUI's class
        '&:first-child': {
            paddingLeft: '1em',
        },
    },
    link: { // This is just a normal JSS class
        textDecoration: 'underline',
        textDecorationColor: '#ccc',
    },
}

Здесь я пытаюсь использовать имена классов для применения обоих этих классов:

// import classNames from 'classnames'
<ListItemText
    inset
    classes={
        classNames({
            inset: classes.insetListItemText,
            [classes.link]: true
        })
    }
>
    List item text
</ListItemText>

У меня просто не получается понять, как объединитьдве методологии синтаксически.Есть идеи?!

Answer 1

Я полагаю, вы почти доберетесь туда.По сути, classes prop не ожидает строку имен классов (что и возвращает classnames), но объект пары ключей с предопределенным keys и именами настраиваемых классов.

В документах: https://material -ui-next.com / api / list-item-text / LisItemText принимает эти значения в качестве ключей classes prop: root, inset, dense, primary, secondary, textDense.Так что ваш JSX должен выглядеть так:

<ListItemText
    inset
    classes={{
      inset: [Name of your jss clases go here]
    }}
>
    List item text
</ListItemText>