Material UI Theme 覆盖如何正确更新标签和输入之间的间隙答案

【问题标题】：Material UI Theme Overrides how to correctly update gap between label and inputMaterial UI Theme 覆盖如何正确更新标签和输入之间的间隙
【发布时间】：2021-07-23 12:43:54
【问题描述】：

我正在尝试使用 overrides 功能更新我的 MUI 主题。

这是我的输入字段：

我想增加标签和输入字段之间的差距。

这是我拥有的overrides 代码：

const overrides: Overrides = {
  MuiInput: {
    root: {
      backgroundColor: 'white',
      border: '1px solid #cdcfd1',
      borderRadius: 10,
      height: 50
    }
  },
  MuiInputBase: {
    root: {
      marginTop: 25
    }
  },
  MuiInputLabel: {
    asterisk: {
      '&$error': { color: '#eb131b' },
      color: '#eb131b',
      float: 'left',
      marginRight: 5
    },
    root: {
      '&$focused': {
        color: '#222',
        transform: 'translate(0, 0)'
      },
      color: '#222',
      fontSize: 16,
      fontWeight: 'bold',
      top: 0,
      transform: 'translate(0, 0)'
    },
    shrink: {
      transform: 'translate(0, 0)'
    }
  }
};

我想将MuiInputBase 边距更改为25，但它被以下内容覆盖：

通过主题覆盖更新此内容的正确方法是什么？

补充：这里有一个代码沙箱链接来解决这个问题：https://2gv94.csb.app/

【问题讨论】：

请给我们一个密码箱来检查一下！
好的，我会开始工作的
@gionic 这里是：2gv94.csb.app

标签： css material-ui material-design overriding themes

【解决方案1】：

请在overrides 和您的MuiInput 中添加

formControl: {
  "label + &": {
    marginTop: "25px"
  }
}

查看示例here

【讨论】：

【解决方案2】：

你可以使用：

MuiInput: {
  formControl: {
    "label + &": {
      marginTop: 25
    }
  }
},

【讨论】：