Пользовательский интерфейс материала: не применяется переопределение стиля вложенных компонентов

Question

Я новичок в CSS в JS, и немного застрял в стилях компонентов в пользовательском интерфейсе материалов - в частности, как переопределить стиль вложенных элементов.Я слежу за официальными документами , но это не помогает.

В объекте стилей, который я установил:

listItemText: {
  fontSize: 0.8,
  color: '#ccc'
},
span: {
  fontSize: 0.8,
  color: '#ccc'
}

Компонент выглядит так:

<ListItemText
  primary={text}
  classes={{
    root: classes.listItemText,
    span: classes.span
  }}
/>

Как видно из демонстрационной ссылки, приведенной ниже, размер и цвет шрифта применяются к родительскому компоненту, а не к вложенному диапазону.Как я могу применить это на промежутке?

Answer 1

Я понял это. Каждый компонент имеет свой собственный CSS API ...

Было бы лучше, если бы это было задокументировано более четко.

<ListItemText
  primary={obj.label}
  classes={{
    root: classes.listItemText,
    primary: classes.listItemText
  }}
/>

https://material -ui.com / апи / элемента списка, текст /