如何覆盖深层嵌套组件的样式？ （Material-UI Jss样式）

Question

材料UI文本字段呈现为以下DOM结构：

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

如果我在TextField的'className'或'classes'或'style'中添加任何内容，则全部归FormControl所有。

我要重写样式“ MuiInputBase-input-29”。具体来说，我需要更改字体大小以及其他样式。

我发现的唯一选择是：JSS nested styles container

但是是

1. 有效地禁用组件的全局主题（我不这样做） 想要），
2. 其他开销

有没有一种更好的方法来覆盖此深层样式（“ MuiInputBase-input-29”）？

Answer 1

如果您仍然需要答案，我已经找到了解决方法

您可以将参数InputProps设置为“文本”字段。这是我的InputProps：

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

其中“输入”是输入元素的类，“根”是MuiInputBase的类

Answer 2

不确定100％，但可能是这样（为您的案例设置了精确的嵌套CSS类）：

import './styles.css';


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