如何覆盖深度嵌套组件的样式？ (Material-UI Jss 样式)

Question

Material UI TextField 呈现为以下 DOM 结构：

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

如果我将任何内容放入 TextField 的 'className' 或 'classes' 或 'style'，它都会转到 FormControl。

我想要的是覆盖样式"MuiInputBase-input-29"。具体来说，我需要更改字体大小以及其他一些样式。

我找到的唯一选项是：JSS nested styles container

但是

有效地禁用我的组件的全局主题（我没有想要），
额外开销

有没有办法以更好的方式覆盖此 ("MuiInputBase-input-29") 深层样式？

Answer 1

不是 100% 确定，但可能是这样的（为您的情况设置的精确嵌套 css 类）：

import './styles.css';


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

Answer 2

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

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

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

其中 'input' 是输入元素的类，'root' 是 MuiInputBase 的类

如何覆盖深度嵌套组件的样式？ (Material-UI Jss 样式)

How do I override a style of a deeply nested component? (Material-UI Jss Styling)

material-ui

jss