问题

pseudo-classes are not displayed

'& > div': {
width: 'inherit',
marginTop: '100px',
backgroundColor: '#212121',
borderRight: 'none'

can you tell me how to fix it?

import useStyles from 'components/Sidebar/styles';

function MenuItem(props) {
const { title } = props;
return <Typography variant="body2">{title}</Typography>;
}

MenuItem.propTypes = {
title: PropTypes.object.isRequired
};

function SidebarItem(props) {
const { link, inset, toggleSidebar } = props;
const classes = useStyles();

function handleItemClick() {
if (isMobileDevice()) {
toggleSidebar();
}
}

return (
<Link to={link.path} className={classes.linkItem} tabIndex="-1">
<ListItem button onClick={handleItemClick}>
{link.icon && <ListItemIcon className={classes.listItemIcon}>{link.icon}</ListItemIcon>}
<ListItemText className={classes.listItemText} inset={inset} primary={link.title} />
</ListItem>
</Link>
);
}

SidebarItem.propTypes = {
link: PropTypes.object.isRequired,
inset: PropTypes.bool.isRequired,
toggleSidebar: PropTypes.func.isRequired
};

export default SidebarItem;

*applies to this file*

I did not write the imports part:

import React from 'react';
import PropTypes from 'prop-types';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import Typography from '@material-ui/core/Typography';
import { Link } from '@reach/router';
import { isMobileDevice } from 'tools/mobileCheck.js';

What am I doing wrong? Tell me please.
I don't know what else to write)) but it's not enough for them.
Thank you, if you need more information, write to me.

```  listItemText: {
    paddingLeft: theme.spacing(1.5),
    '&:first-child': {
      paddingLeft: theme.spacing(5)
    }
  }

All pseudo-classes do not work((

<details>
<summary>英文:</summary>

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(theme => ({
sidebarList: {
transition: 'width 0.2s ease',
marginRight: '0px',
width: '300px',
'& > div': {
width: 'inherit',
marginTop: '100px',
backgroundColor: '#212121',
borderRight: 'none'
},
'&.mini': {
transition: 'width 0.2s ease',
width: '0px',
'& > div': {
width: 'inherit'
}
}
},
linkItem: {
textDecoration: 'none',
'&:focus': {
outline: 'none'
}
},
listItemIcon: {
marginRight: theme.spacing(1)
},
listItemText: {
paddingLeft: theme.spacing(1.5),
'&:first-child': {
paddingLeft: theme.spacing(5)
}
}
}));

export default useStyles;

pseudo-classes are not displayed

'& > div': {
width: 'inherit',
marginTop: '100px',
backgroundColor: '#212121',
borderRight: 'none'

can you tell me how to fix it?

import useStyles from 'components/Sidebar/styles';

function MenuItem(props) {
  const { title } = props;
  return <Typography variant="body2">{title}</Typography>;
}

MenuItem.propTypes = {
  title: PropTypes.object.isRequired
};

function SidebarItem(props) {
  const { link, inset, toggleSidebar } = props;
  const classes = useStyles();

  function handleItemClick() {
    if (isMobileDevice()) {
      toggleSidebar();
    }
  }

  return (
    <Link to={link.path} className={classes.linkItem} tabIndex="-1">
      <ListItem button onClick={handleItemClick}>
        {link.icon && <ListItemIcon className={classes.listItemIcon}>{link.icon}</ListItemIcon>}
        <ListItemText className={classes.listItemText} inset={inset} primary={link.title} />
      </ListItem>
    </Link>
  );
}

SidebarItem.propTypes = {
  link: PropTypes.object.isRequired,
  inset: PropTypes.bool.isRequired,
  toggleSidebar: PropTypes.func.isRequired
};

export default SidebarItem;

*applies to this file*

I did not write the imports part:

import React from 'react';

import PropTypes from 'prop-types';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import Typography from '@material-ui/core/Typography';
import { Link } from '@reach/router';
import { isMobileDevice } from 'tools/mobileCheck.js';

What am I doing wrong? Tell me please.
I don't know what else to write)) but it's not enough for them.
Thank you, if you need more information, write to me.

```  listItemText: {
    paddingLeft: theme.spacing(1.5),
    '&:first-child': {
      paddingLeft: theme.spacing(5)
    }
  }

All pseudo-classes do not work((

答案1

得分: 2

The implementation of pseudo-classes directly within the generated CSS is not supported by the makeStyles function, which is the problem. You can get around this restriction by using the $pseudoClassName syntax.

Here's an example of how you can modify your styles to make the pseudo-classes work:

const useStyles = makeStyles(theme => ({
  sidebarList: {
    // Other styles...
    '& > div': {
      // Other styles...
      '&$mini': { // Use &$mini instead of &.mini
        // Mini styles...
      }
    }
  },
  mini: {}, // Define the mini class
  // Other styles...
}));

> Refer to [Docs][1]

[1]: https://mui.com/system/styles/advanced/#makestyles

const useStyles = makeStyles(theme => ({
  sidebarList: {
    // Other styles...
    '& > div': {
      // Other styles...
      '&$mini': { // Use &$mini instead of &.mini
        // Mini styles...
      }
    }
  },
  mini: {}, // Define the mini class
  // Other styles...
}));