Question

在项目根目录下有一个components目录

/components/Sidebar.js

import { IconButton } from '@material-ui/core';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import ChatIcon from '@material-ui/icons/Chat';
import classes from './Sidebar.module.css';

const Sidebar = () => {
    return (
        <div className={classes.container}>
            <div className={classes.header}>
                <Avatar className={classes.userAvatar} />
                <div className={classes.iconsContainer}>
                    <IconButton>
                        <ChatIcon />
                    </IconButton>
                    <IconButton>
                        <MoreVertIcon />
                    </IconButton>            
                </div>
            </div>
        </div>
    )
}

export default Sidebar

里面 components/Sidebar.module.css

.header{
    display: flex;
    position: sticky;
    top: 0;
    background-color: white;
    z-index: -1;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    height: 80px;
    border-bottom: 1px solid whitesmoke;
}

.userAvatar {
    cursor: pointer;
}

.userAvatar:hover {
     opacity: 0.8;
}

尽管 Nextjs 支持模块 css，但仅应用了少数样式例如，在 userAvatar 类下的 Avatar 材质 ui 图标中，我已将光标添加到指针，但这并没有生效。我得到的 Chrome 开发者工具

.Sidebar_userAvatar__3YZVw {
    cursor: pointer;
}

当我将鼠标悬停在它上面时，它不会添加指针光标。即使我已经安装并导入了必要的包，这些 IconButton 属性也不会受到影响。 .header 中的 Flexbox 应用正确，其余部分未应用

CSS 模块在 Next JS 中不会完全生效

0 个答案: