[英]how to disable the select box border on MUI component
i would like to disable the border on the select box and change color of the label text while onfocus and onblur i have tried it but im unable to disable it我想在 onfocus 和 onblur 时禁用 select 框上的边框并更改 label 文本的颜色我已经尝试过但我无法禁用它
im not that decent in Mui component customization我在 Mui 组件定制方面不太体面
we is the image that i want我们是我想要的形象
and here what i achieved这是我取得的成就
here is the code这是代码
<div>
<FormControl sx={{ minWidth: 120, height: "1rem" }}>
<Select
value={age}
onChange={handleChange}
displayEmpty
inputProps={{ "aria-label": "Without label" }}
sx={{
height: "1rem",
borderRadius: 1,
// border: ".2rem solid white",
bgcolor: "#fffff",
outline: "none",
padding: "0rem",
// fontSize: "4rem",
}}
>
<MenuItem value="">Affiliation</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</div>
here is the mui fresh component这是 mui 新鲜组件
https://codesandbox.io/s/vjeqqb?file=/demo.js https://codesandbox.io/s/vjeqqb?file=/demo.js
could anyone help me out please i want that output exact in the about image谁能帮帮我,我想要关于图片中的 output
thanks advance提前谢谢
Just set sx
attribute like the following:只需像下面这样设置sx
属性:
<select
...
sx={{ boxShadow: 'none', '.MuiOutlinedInput-notchedOutline': { border: 0 } }}>
...
</select>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.