mui 自动完成删除焦点边框

Question

在此输入图像描述

我在我的项目中使用 React Material ui Autocomplete 组件。当我单击自动完成组件时，组件内部会显示蓝色轮廓。我需要定位哪个元素才能从组件中删除蓝色轮廓？我尝试过针对不同的部分并使用

sx={{
            '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
              border: 'none',
            },
    }}

但它删除了最外层的边框。我需要删除内边框（检查图像）。任何帮助将非常感激。

<Autocomplete
          disablePortal
          id="combo-box-demo"
          options={productCode}
          sx={{
            '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
              border: 'none',
            },
          }}
          getOptionLabel={(option) => option.name}
          renderInput={(params) => <TextField {...params} />}
        />

Answer 1

如果您想定位自动完成边框 => 这就是我所做的：取消注释每个边框以查看您想要定位的边框。我认为您想要定位字段集"& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline"，但要尝试所有边界。

<Autocomplete
                disableClearable
                disabled={options.length === 0}
                options={options}
                getOptionLabel={(option) => option}
                value={value}
                onChange={(e, val) => {
                    onChange(val)
                }}
                renderOption={(option) => <Button sx={{
                    fontSize: "calc(0.5vw + 5px)",
                }}
                    onClick={() => { onChange(option.key) }}
                >
                    {option.key}
                </Button>}
                sx={{
                    // border: "1px solid blue",
                    "& .MuiOutlinedInput-root": {
                        // border: "1px solid yellow",
                        borderRadius: "0",
                        padding: "0"
                    },
                    "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
                        border: "1px solid #eee"
                    }
                }}

                renderInput={(params) => (
                    <TextField
                        {...params}
                        margin="none"
                        inputProps={{
                            ...params.inputProps,
                            style: {
                                padding: "calc(0.5vw + 5px)",
                                fontSize: "calc(0.5vw + 5px)",
                                // border: "1px solid red"
                            },
                        }}
                    />
                )}
            />