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

2
votes

Material UI TextField is rendered to the following DOM structure:

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

If I put anything into TextField's 'className' or 'classes' or 'style', it all goes to FormControl.

What I want is to override style "MuiInputBase-input-29". Specifically I need to change font-size, and also some other stylings.

The only option I found is this: JSS nested styles container

but it's

  1. effectivly disables global theme for my components (which I don't want to),
  2. additional overhead

Is there a way to override this ("MuiInputBase-input-29") deep style in a better way?

2
material-uijss

2 Answers

1
votes

if you still need answer, I've already find a solution

You can set a parameter InputProps to Text field. Here is my InputProps:

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

Where 'input' are classes for input element and 'root' are classes for MuiInputBase

0
votes

Not 100% sure but maybe something like this (exact nesting css classes set for your case):

import './styles.css';


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