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

Question

Я пытаюсь создать собственный стиль для материала textField и мне нужен селектор JSS, который достигает недетерминированного имени класса.

Стиль будет выглядеть примерно так:

const styles = {
  '@media (min-width: 768px)': {
     borderLabel: {
     top: 2,
     '&.MuiInputLabel-shrink':{
        top: -2,
      }
    }
}

ПроблемаMuiInputLabel-shrink также генерируется jss и имеет суффикс числа xxx.Есть ли селектор, который работает с сгенерированными классами?

Answer 1

Material-ui имеет встроенный API, в котором вы можете переопределить в основном стили.

Предполагая, что вы используете material-ui в реакции, вы можете переопределить сжатие в свойстве classes компонента InputLabel.

<InputLabel 
    classes={{ 
        shrink: classes.shrinkStyle 
    }} 
/>

Прочтите документацию, чтобы найти правильный компонент для переопределения.Также есть прикрепленный код, который поможет вам в пути.https://codesandbox.io/embed/l32qn5p18q

Ссылка на похожую проблему в GitHub: https://github.com/mui-org/material-ui/issues/10468

Теперь вернемся к стилю через JSS

Есть несколько возможностей для стилизациис JSS через вложение.Я не очень много исследовал это, но я знаю, что вы можете использовать вложенный JSS.Пример:

const styles = {
  '@media (min-width: 768px)': {
     borderLabel: {
       //styling
       '&>div':{
         //styling
       }
       '&>div>div>td':{
         '& svg':{
           //styling
         }
       }
     }
   }
}

Вы также должны прочитать Документацию JSS