如何从 MUI 自动完成文本字段中删除蓝色轮廓？

Question

<Autocomplete
                {...{ className }}
                multiple
                options={options}
                value={value}
                onChange={handleOnChange}
                id="tags-standard"
                renderInput={(params) => (
                    <TextField
                        {...params}
                        sx={{
                            '& .MuiAutocomplete-inputFocused': {
                                border: 'none', // fixed extra hover
                                outline: 'none',
                                
                        }, 
                           }}
                        label="Search or add new tags"
                        variant="outlined"
                        fullWidth
                        onInput={handleInputChange}
                        value={inputValue}
                        InputProps={{
                            ...params.InputProps,
                            endAdornment: (
                                <>
                                    {params.InputProps.endAdornment}
                                    <Button onClick={handleAddNewOption}>Add</Button>
                                </>
                            )
                        }}
                    />
                )}
            />

我在这里尝试了

sx={}

但没有成功。

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