[英]How to change background color of a selected ItemList Material-Ui
I have created a selectable component using Material-UI我使用 Material-UI 创建了一个可选择的组件
let SelectableInfiniteList = makeSelectable(Infinite);
and put ListItem inside, now I want to change the default grayish color of a selected item, but I don't know how, if I give it a className并将 ListItem 放入其中,现在我想更改所选项目的默认灰色,但我不知道如何给它一个类名
<ListItem className="list-item" primaryText={i}/>
and use list-item:focus selector I can change the background color as long as it is focused (but if I click somewhere else in the app) the focus is lost and the gray color shows up on the (still) selected item,并使用 list-item:focus 选择器我可以更改背景颜色,只要它被聚焦(但如果我单击应用程序中的其他地方)焦点就会丢失并且灰色显示在(仍然)选定的项目上,
is there a way to change the selected item background color?有没有办法更改所选项目的背景颜色?
I had to use Global Theme override: https://material-ui.com/customization/components/#global-theme-override我不得不使用全局主题覆盖: https : //material-ui.com/customization/components/#global-theme-override
const muiTheme = createMuiTheme({
overrides: {
MuiListItem: {
root: {
"&$selected": {
backgroundColor: "red",
"&:hover": {
backgroundColor: "orange",
},
},
},
button: {
"&:hover": {
backgroundColor: "yellow",
},
},
},
},
});
Change default selected gray color by passing selected
style like this.通过像这样传递selected
样式来更改默认选定的灰色。
<ListItem
button
selected={true}
classes={{ selected: classes.active }}>
<ListItemText primary={item.name} />
</ListItem>
Style object should be like this.样式对象应该是这样的。
active: {
backgroundColor: "red"
}
In your Higher Order Component add new property selectedItemStyle!在您的高阶组件中添加新属性 selectedItemStyle!
<ComposedComponent selectedItemStyle={selectedItemStyle} value={this.state.selectedIndex} onChange={this.handleRequestChange} containerHeight={this.props.containerHeight} elementHeight={40}>
{this.props.children}
</ComposedComponent>
where selectedItemStyle is selectedItemStyle 在哪里
const slectedItemStyle = {
backgroundColor: 'red'
}
If you're interested in an approach without overriding styles globally,如果您对不覆盖全局样式的方法感兴趣,
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
root: {
'&$selected': {
backgroundColor: 'red',
'&:hover': {
backgroundColor: 'yellow',
}
},
},
selected: {},
});
const CustomSelectedListItem = (
<ListItem
button
classes={{ root: classes.root, selected: classes.selected }}
selected
>
<ListItemText primary="List Item" />
</ListItem>
);
Codesandbox .代码沙盒。 Material-UI docs . Material-UI 文档。
You can use Mui global theme override which will basically override all the ListItems in your project with the style properties-您可以使用 Mui 全局主题覆盖,它基本上会使用样式属性覆盖项目中的所有 ListItems-
MuiMenuItem: {
root: {
fontFamily: 'Aria....',
'&$selected': {
backgroundColor: '#B2D0EB!important'
},
'&:hover': {
backgroundColor: '#B2D0EB!important',
color: '#707070!important',
}
},
}
However you can also use id/class name if you want selected component to have different styles但是,如果您希望所选组件具有不同的样式,您也可以使用 id/class name
You can use Mui global theme override which will basically override all the ListItems in your project with the style properties-您可以使用 Mui 全局主题覆盖,它基本上会使用样式属性覆盖项目中的所有 ListItems-
MuiMenuItem: {
root: {
fontFamily: 'Aria....',
'&$selected': {
backgroundColor: '#B2D0EB!important'
},
'&:hover': {
backgroundColor: '#B2D0EB!important',
color: '#707070!important',
}
},
}
However you can also use id/class name if you want selected component to have different styles但是,如果您希望所选组件具有不同的样式,您也可以使用 id/class name
If you prefer local custom style, you can override material-ui
's component styles by classes
( https://material-ui.com/customization/components/#overriding-styles-with-classes )如果您更喜欢本地自定义样式,您可以通过classes
覆盖material-ui
的组件样式( https://material-ui.com/customization/components/#overriding-styles-with-classes )
ListItem
's CSS section at https://material-ui.com/api/list-item/#css and we know在https://material-ui.com/api/list-item/#css检查ListItem
的 CSS 部分,我们知道...
selected .Mui-selected Pseudo-class applied to the root element if selected={true}.
...
The rule name we would override is: selected
// For example
const useStyles = makeStyles((theme) => ({
listItemSelected: {
color: 'red',
},
}));
ListItem
's classes
覆盖ListItem
的classes
// Override rule "selected" by "listItemSelected"
<ListItem classes={{selected: listItemSelected}}>
<ListItemText primary={"Hi"} />
</ListItem>
If you want to override global styles for it, please follow:如果您想为其覆盖全局样式,请遵循:
Using Material UI v4 and this worked for me:使用 Material UI v4,这对我有用:
<ListItem button classes={{ root: classes.listItemRoot }}>
...
</ListItem>
with:和:
const useStyles = makeStyles((theme) => ({
listItemRoot: {
"&.Mui-selected": {
backgroundColor: 'red',
}
},
}));
const theme = createTheme({
components: {
MuiListItem: {
styleOverrides: {
root: {
backgroundColor: 'blue',
'&.Mui-selected': {
backgroundColor: 'red',
},
},
},
},
},
});
Based on the CSS rules of the TablePagination component(Material UI v3.9.4):基于 TablePagination 组件(Material UI v3.9.4)的 CSS 规则:
menuItem:{
"&[class*='MuiMenuItem-selected-']":{
backgroundColor: "red !important",
},
},
Work best when you used styled-components:使用样式化组件时效果最佳:
const CustomListItem = styled(ListItem)`
&&.Mui-selected {
background-color: grey;
}
`
Use the the component in your code:
<CustomListItem>
...
</CustomListItem>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.