[英]mui autocomplete remove focused border
我在我的项目中使用 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} />}
/>
如果您想定位自动填充边框 => 我就是这样做的:取消注释每个边框以查看您想要定位哪个边框。 我认为您想针对"&.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.