In Material UI, How can I override a selector selected component style?

问题

In Material UI, to extend the distance between MuiInputLabel and MuiInput, I have to override the marginTop of label + .MuiInput-formControl.

However, createMuiTheme's override only provide direct override of a Mui Component CSS, such as:

createMuiTheme({
  overrides: {
    MuiInput: {
      formControl: {
        marginTop: '1.5rem',
      },
    },
  }
})

How can I do something like:

createMuiTheme({
  overrides: {
    'label+MuiInput': {
      formControl: {
        marginTop: '1.5rem',
      },
    },
  }
})

Thanks...

回答1:

Here's the relevant JSS documentation:

https://cssinjs.org/jss-plugin-nested?v=v10.0.0-alpha.10#use--to-reference-selector-of-the-parent-rule

Here's the syntax you need:

const theme = createMuiTheme({
  overrides: {
    MuiInput: {
      formControl: {
        "label + &": {
          marginTop: "1.5rem"
        }
      }
    }
  }
});

Here's a working example:

来源：https://stackoverflow.com/questions/54724968/in-material-ui-how-can-i-override-a-selector-selected-component-style