css - Material UI Theme Overrides how to correctly update gap between label and input
问题描述
I'm trying to update my MUI themes using the overrides
functionality.
This is what I have for my input field:
I want to increase the gap between the label and the input field.
This is the overrides
code that I have:
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)'
}
}
};
I want to change the MuiInputBase
margin to 25
but it is being overridden by the following:
What is the correct way to update this via the theme overrides?
Extra: Here's a link to a Code Sandbox to play around with the issue: https://2gv94.csb.app/
解决方案
Please add inside overrides
and inside your MuiInput
formControl: {
"label + &": {
marginTop: "25px"
}
}
Check the example here
推荐阅读
- ithit-webdav-server - 写入通过映射驱动器中的 Windows 资源管理器打开文件时所做的文件更改
- batch-file - 归档目录超过 N 天的批处理脚本
- javascript - 反应原生相机在导航时变为空白
- jquery - Jquery:将最后一行集中在textarea上的更改
- mysql - subTables 连接查询,任何数据库中间件建议
- go - 当我使用 go get 获取一些包时,如何切换到 golang.google.cn?
- google-optimize - 如何使用谷歌优化改变环境
- sql-server - TSQL 管理器层次结构
- colors - 使用 GLSL 着色器将 X、Z 坐标转换为 RGB
- python-3.x - 如何使用Pinpoint从python中的长代码发送短信?