仅用于Select - 编程之家

如何解决仅用于Select

我目前需要向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',...