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'
}

当我尝试打开应用程序时，这就是我在检查输入元素时看到的组件 styles

但与此同时，您可以看到未考虑其他样式填充无法正常工作我知道如果我使用 important 标志，它将覆盖输入填充。 但我不想使用它。

Answer 1

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

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

您的代码片段没有显示返回您的classes object 的内容，因此我假设您使用的是类似makeStyles的东西，并且您仍然希望按原样应用输入 styles（通过输入类键）。 您可以通过执行以下操作来实现更高的特异性：

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)。

请注意，根据您的项目设置方式，您可能能够匹配特异性并让您的 styles 优先（即只需要 &&&）。

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

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'
  }
}