Как переопределить стиль глубоко вложенного компонента?(Материал-Интерфейс Jss Styling)

Question

Пользовательский интерфейс материала TextField отображается в следующей структуре DOM:

<FormControl... > 
    <BaseInput ...>
        <input class ="MuiInputBase-input-29" ...>
    </BaseInput>
</FormControl> 

Если я помещаю что-либо в 'className' или 'classes' или 'style' TextField, все это переходит в FormControl.

Я хочу переопределить стиль "MuiInputBase-input-29".В частности, мне нужно изменить размер шрифта, а также некоторые другие стили.

Единственный найденный мной вариант: Контейнер вложенных стилей JSS

, но это

1. эффективно отключает глобальную тему для моих компонентов (чего я не хочу),
2. дополнительные издержки

Есть ли способ переопределить это ("MuiInputBase-вход-29 ") глубокий стиль лучше?

Answer 1

если вам все еще нужен ответ, я уже нашел решение

Вы можете установить параметр InputProps в текстовое поле.Вот мои InputProps:

InputProps={{
  classes: {
    root: multiline ? classes.inputRootMultiline : null,
    input: classNames(
      classes.modalTextResize,
      classes.modalInputPadding,
      disabled && disabledValue ? classes.disabled : classes.modalTextColor,
    ),
  },
}}

Где 'input' - это классы для элемента ввода, а 'root' - это классы для MuiInputBase

Answer 2

Не уверен на 100%, но, может быть, что-то вроде этого (точные классы вложенности css установлены для вашего случая):

import './styles.css';


styles.css:
-------------------------------
.container  .children {
      color: red;
}