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

【问题标题】：Can I use ::selection Selector in Material-UI我可以在 Material-UI 中使用 ::selection 选择器吗
【发布时间】：2021-05-09 07:17:21
【问题描述】：

我想知道是否有某种方法可以在 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' 选择器来实现吗？

【问题讨论】：

标签： reactjs material-ui material-design

【解决方案1】：

在您的示例中，您使用的是 hover pseudo-class 和 selection pseudo-element

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

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

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

【讨论】：