CODEWITHSUNDEEP
reactjsmaterial-ui
Shafiq Rahman
Shafiq Rahman

Reputation: 71

mui autocomplete remove focused border

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

Upvotes: 7

Views: 11784

Answers (3)

Prince Roy
Prince Roy

Reputation: 1

This fixes the problem:

.css-16d15bc-MuiInputBase-root-MuiInput-root::before":{
     border:"none"
}

Upvotes: 0

Dejan Nesic
Dejan Nesic

Reputation: 31

I used this:

            sx={{
              "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
                {
                  borderColor: "black",
                },
            }}

ChatGPT helped me

Upvotes: 3

SC K
SC K

Reputation: 197

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

Upvotes: 7

Related Questions