mui autocomplete remove focused border

user_19806819 0
Viewed 129

enter image description here

I'm using React material ui Autocomplete component in my project. When I click a autocomplete component a blue outline is visible inside the component. Which element do I need to target to remove the blue outline from the component? I've tried targeting various parts and using

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

but it removes the outermost border. I need to remove the inner border(check image). Any help would be much appreciated.

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

If you want to target the autocomplete borders => here is what I do: uncomment each of the borders to see which one you want to target. I think you want to target the fieldset "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline" but play around with all the borders.

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