在Material UI中,如何覆盖选择器选择的组件样式?

问题描述 投票:1回答:1

在Material UI中,为了扩展MuiInputLabelMuiInput之间的距离,我必须覆盖label + .MuiInput-formControl的marginTop。

但是,createMuiTheme的覆盖仅提供Mui组件CSS的直接覆盖,例如:

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

我该怎么做:

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

谢谢...

material-ui react-admin
1个回答
4
投票

这是相关的JSS文档:

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

这是您需要的语法:

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

这是一个有效的例子:

Edit 24v1wr9x0n

© www.soinside.com 2019 - 2024. All rights reserved.