MUI 自动完成覆盖输入填充不起作用

Question

我正在尝试覆盖 MUI 自动完成组件内的填充，但它似乎无法正常工作

const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
    const checkedIcon = <CheckBoxIcon fontSize="small" />;
    const _getCustomOption = (props, option, { selected }) => {
        const renderOption = (
            <li { ...props }>
                <Checkbox icon={ icon } checkedIcon={ checkedIcon } checked={ selected } classes={ { root: classes.checkbox } } />
                    { option }
            </li>
        );
        return multiple? { renderOption } : {};
    };
    const _renderInput = (params) => (
        <Field { ...params } variant="outlined" placeholder={ placeholder } InputProps={ { ...params.InputProps, readOnly: true } } classes={ { root: `${fieldRootClassName} ${classes.textFieldRoot}` } } />
    );

    return (
        <React.Fragment>
            <Typography variant="subtitle1" gutterBottom className={ `${labelClassName} ${disabled ? classes.disabledText : ''}` }
                        noWrap align="left" style={ { color: labelColor } }>
                { required ? `${label} *` : label }
            </Typography>
            <Autocomplete fullWidth multiple
                          classes={ { root: `${fieldRootClassName} ${classes.textFieldRoot}`, inputRoot: `${classes.createEventInput}`, input: `${classes.createEventInput}`, listbox: classes.dropdownListBox, tag: classes.chipTag, paper: classes.dropdownPaper } }
                          disableCloseOnSelect={ multiple } options={ options } renderInput={ _renderInput } disabled={ disabled } onChange={ _onSelectionChange } { ..._getCustomOption } />
        </React.Fragment>
    );

这是我正在尝试使用的 class createEventInput

createEventInput: {
   padding: '10.5px 14px 10.5px'
}

当我尝试打开应用程序时，这就是我所看到的 component styles when inspecting the input element

但同时你可以看到没有考虑其他样式 Padding not working properly 我知道如果我使用 !important 标志，它将覆盖输入填充，但我不想使用它。

Answer 1

问题是 css 特异性。应用样式的选择器是：.css-eozd4h-MuiAutocomplete-root .MuiOutlinedInput-root .MuiAutocomplete-input，它的 css specificity 为 (0,3,0)。

您还展示了样式被应用但被覆盖的图像。发生这种情况的原因是因为选择器是 .CustomTextField-createEventInput-13685，它具有 (0,1,0) 的特异性。为了应用您的填充样式，您需要选择器具有大于 (0,3,0) 的特异性。

您的代码片段没有显示返回您的 classes 对象的内容，因此我假设您使用的是 makeStyles 之类的东西，并且您仍然希望将输入样式应用为你是（通过输入类键）。您可以通过执行以下操作来获得更高的特异性：

createEventInput: {
  "&&&&": {
    padding: '10.5px 14px 10.5px'
  }
}

上面的工作是因为 & 是“父选择器”，在这种情况下等同于 .CustomTextField-createEventInput-13685。通过重复 & 4 次，我们最终得到了 .CustomTextField-createEventInput-13685.CustomTextField-createEventInput-13685.CustomTextField-createEventInput-13685.CustomTextField-createEventInput-13685 的最终选择器，这非常丑陋......但它确实导致了 (0,4,0).[=21 的特异性=]

注意根据您的项目设置方式，您可能能够匹配特殊性并优先使用您的样式（即只需要 &&&）。

一种不那么丑陋的匹配特异性的方法可能是通过“根”设置输入样式。

textFieldRoot: {
  // this has a specificity of (0,3,0) so might not work if you need to be more specific.
  "& .MuiOutlinedInput-root .MuiAutocomplete-input": {
    padding: '10.5px 14px 10.5px'
  }
}

MUI 自动完成覆盖输入填充不起作用

MUI autocomplete override input padding not working

html

css

reactjs

material-ui

autocomplete