我可以在 Material-UI 中使用::selection 选择器吗

Question

我想知道是否有某种方法可以在 Material-UI 中使用::selection 。 代码：-

import React from 'react';
import { makeStyles } from '@material-ui/core';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/Inbox';

const styles = makeStyles((theme) => ({
    root: {
        '&:hover': {
            backgroundColor: theme.palette.primary.contrastText,
        },
        '&:selection': {
            backgroundColor: 'tomato',
        },
    },
}));

const Items: React.FC = () => {
    const classes = styles();
    return (
        <List component='nav' aria-label='management side bar'>
            <div className={classes.root}>
                <ListItem button>
                    <ListItemIcon>
                        <InboxIcon />
                    </ListItemIcon>
                    <ListItemText primary='Inbox' />
                </ListItem>
            </div>
        </List>
    );
};

export default Items;

我只想在选择List Component时更改背景颜色，我可以使用 material-ui 中的简单 '::selection' 选择器来做到这一点吗？

Answer 1

在您的示例中，您使用的是hover 伪类和selection 伪元素

所有伪类都通过:使用，伪元素通过::

因此，您的样式代码应如下所示：

const styles = makeStyles((theme) => ({
    root: {
        '&:hover': {
            backgroundColor: theme.palette.primary.contrastText,
        },
        '&::selection': {
            backgroundColor: 'tomato',
        },
    },
}));