[英]Global style override for MUI Select
I'm trying to style a select
component in a react project using MUI 5, specifically, I'm trying to change the border size and color when the select
component is focused.我正在尝试使用 MUI 5 在 React 项目中设置
select
组件的样式,具体来说,我正在尝试在聚焦select
组件时更改边框大小和颜色。 Other components can be globally styled just fine using styleOverrides followed by root but select
doesn't seem to have the root attribute.其他组件可以使用 styleOverrides 后跟 root 进行全局样式设置,但
select
似乎没有 root 属性。 Tried changing the select
component into a textfield
component with the select prop and that seemed to work but I was wondering if there's a way to style select
without changing them into textfield
.尝试将
select
组件更改为带有 select 道具的textfield
组件,这似乎有效,但我想知道是否有一种方法可以在不将其更改为textfield
字段的情况下设置select
的样式。
This is the code snippet that I use for my textfield
global style overrides:这是我用于
textfield
全局样式覆盖的代码片段:
export const theme = createTheme({
components: {
MuiTextField: {
styleOverrides: {
root: {
'& .MuiOutlinedInput-root.Mui-focused fieldset': { border: '3px solid #A6CBF3'},
},
},
},
})
This is how I could change the style for the focus state for the Select
component using the theme.这就是我如何使用主题更改
Select
组件的焦点 state 的样式的方法。
export const theme = createTheme({
components: {
MuiSelect: {
styleOverrides: {
select: {
":focus": {
backgroundColor: "green", // Just for the demo
border: '3px solid #A6CBF3',
},
},
}
},
})
Hope it helped, thanks.希望对您有所帮助,谢谢。
This isn't documented anywhere, but 'root'
appears to still work.这在任何地方都没有记录,但
'root'
似乎仍然有效。 Even though it's not available through the type system.即使它不能通过类型系统使用。
You could try:你可以试试:
export const theme = createTheme({
components: {
MuiSelect: {
styleOverrides: {
...{'root': {
outline: '1px red solid'
}}
}
}
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.