在Material UI中，如何覆盖选择器选择的组件样式? [英] In Material UI, How can I override a selector selected component style?

问题描述

在Material UI中，要扩展MuiInputLabel和MuiInput之间的距离，我必须覆盖label + .MuiInput-formControl的marginTop.

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

但是，createMuiTheme的替代项仅提供Mui Component CSS的直接替代项，例如:

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

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

我该如何做:

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

谢谢...

推荐答案

以下是相关的JSS文档:

Here's the relevant JSS documentation:

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

这是您需要的语法:

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

这是一个可行的示例:

这篇关于在Material UI中，如何覆盖选择器选择的组件样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！