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"
                            },
                        }}
                    />
                )}
            />