问题描述
我目前需要向FormHelperText添加8px的marginLeft。但是还不能在MuiInput formControl规则或MuiSelect中做到这一点。
这是React代码:
<FormControl error className={classes.margin} fullWidth>
<InputLabel className={classes.label} id="demo-error-select-label">
Error select
</InputLabel>
<Select
labelId="demo-error-select-label"
id="demo-error-select"
value={option}
onChange={handleChange}
IconComponent={() => <Icon24UtilityChevron component="select" height="20px" />}>
<MenuItem value="">Select</MenuItem>
<MenuItem value={1}>Option1</MenuItem>
<MenuItem value={2}>Option2</MenuItem>
<MenuItem value={3}>Option3</MenuItem>
</Select>
<FormHelperText>Error</FormHelperText>
</FormControl>
这是 MuiSelect 对象,它使用 createMuiTheme 覆盖了默认样式(省略了其简要说明):
const MuiSelect = {
select: {
backgroundColor: selectColors.background,padding: '12px 16px 12px 16px !important',fontSize: '18px',borderRadius: 12,borderWidth: '1px',borderStyle: 'solid',borderColor: selectColors.border,'&:focus': {
borderRadius: 12,borderWidth: '2px',borderColor: selectColors.borderFocus,},selectMenu: {
'&:hover:not(.Mui-disabled):not(.Mui-error)': {
backgroundColor: selectColors.hoverBackground,};
这是 MuiInput 对象,它使用 createMuiTheme 覆盖了默认样式(省略了其简要说明):
This is an example of the FormControl being created (need to move the Error label 8px to the left):
[![enter image description here][1]][1]
const MuiInput = {
formControl: {
'label + &': {
marginTop: '2px',root: {
borderRadius: '12px',borderColor: inputColors.inputBorder,'&$error': {
borderColor: inputColors.inputError,'&:focus-within': {
borderColor: inputColors.inputBorderFocus,'& svg': {
marginRight: '16px',input: {
backgroundColor: inputColors.inputBackground,caretColor: inputColors.inputCaret,paddingLeft: '8px',paddingRight: '8px',color: inputColors.inputText,borderRadius: '12px',multiline: {
paddingTop: '0px',paddingBottom: '0px',underline: {
'&:hover:not(.Mui-disabled):before': { borderBottomWidth: '0px' },'&:before': { borderBottomWidth: '0px' },'&:after': { borderBottomWidth: '0px' },};
解决方法
我可以使用〜选择器来解决。代码:
const MuiInput = {
formControl: {
'label + &': {
marginTop: '2px',},'& ~ p': {
marginTop: '4px',marginLeft: '8px',...