[英]mui autocomplete remove focused border
enter image description here在此处输入图像描述
I'm using React material ui Autocomplete component in my project.我在我的项目中使用 React Material ui Autocomplete 组件。 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} />}
/>
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.我认为您想针对"&.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"
},
}}
/>
)}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.