当FormControl仅用于Select时FormHelperText的Material-UI更改边距答案

【问题标题】：Material-UI change margin of FormHelperText when FormControl only for Select当FormControl仅用于Select时FormHelperText的Material-UI更改边距
【发布时间】：2021-01-23 02:15:16
【问题描述】：

我目前需要将 8px 的 marginLeft 添加到 FormHelperText。但是在 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>

这是用 createMuiTheme 覆盖默认样式的 MuiSelect 对象（为了简要说明而省略）：

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',
      borderStyle: 'solid',
      borderColor: selectColors.borderFocus,
    },
  },
  selectMenu: {
    '&:hover:not(.Mui-disabled):not(.Mui-error)': {
      backgroundColor: selectColors.hoverBackground,
    },
  },
};

这是用 createMuiTheme 覆盖默认样式的 MuiInput 对象（为了简要说明而省略）：


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,
    borderWidth: '1px',
    borderStyle: 'solid',
    '&$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' },
  },
};

看一下代码的可视化示例（下方的错误文本是需要移动的）：

【问题讨论】：

标签： css reactjs forms material-ui jss

【解决方案1】：

我可以使用 ~ 选择器来解决它。代码：

const MuiInput = {
  formControl: {
    'label + &': {
      marginTop: '2px',
    },
    '& ~ p': {
      marginTop: '4px',
      marginLeft: '8px',
    },
  },
...

【讨论】：