Material UI 主题覆盖如何正确更新标签和输入之间的间隙

Question

我正在尝试使用 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 但它被以下内容覆盖：

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

额外：这是一个 link 代码沙箱来解决这个问题：https://2gv94.csb.app/

Answer 1

您可以使用：

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

Answer 2

请在 overrides 和 MuiInput

内添加

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

查看示例here

Material UI 主题覆盖如何正确更新标签和输入之间的间隙

Material UI Theme Overrides how to correctly update gap between label and input

css

themes

overriding

material-design

material-ui