我使用的来自“@material-ui/icons”的图标不响应我的 SCSS 代码

Question

我从“@material-ui/icons”导入了一些图标。它们正确地出现在屏幕上，但是当我尝试使用 SCSS 操作它们时，它们没有响应。

我有显示：无；但是两个图标都保留在页面上。

我也有一个 Index.css 文件，但是我不认为应该覆盖这个标签。

我尝试将其他 CSS 添加到图标的标签中，但是它们没有移动或改变。

import  React, { useState } from "react";
import "./styles/Header.scss"
import { Close, MenuBookOutlined } from "@material-ui/icons";
import {A} from 'hookrouter'; 


const Header = () => {

     const [active, setActive] = useState(false);

     const showMenu =() =>{
        setActive(!active)
     }

    return(
    <div className="header">

        <div className="header_logo">
            <h1>Christian Bryant</h1>
        </div>

        <nav className="navbar">
            <ul>
        <div className= "closed">
            <Close className = 'close' onclick ={showMenu}/>
        </div>
            <li>
            <A className='Link' href='/'>HOME</A> 
            </li>
            <li>
            <A className='Link' href='/'>ABOUT ME</A> 
            </li>
            <li>
            <A className='Link' href='/'>SKILLS</A> 
            </li>
            <li>
            <A className='Link' href='/'>PROJECTS</A> 
            </li>
            <li>
            <A className='Link' href='/'>BLOG</A> 
            </li>
            <li>
            <A className='Link' href='/'>CONTACT ME</A> 
            </li>
            </ul>
        </nav>

        <div classname="changer">
            <MenuBookOutlined classname="menu"/>
        </div>

    </div>

    )
}

export default Header

// Create the header and navbar styles
.header {
    width: 100%;
    align-items: center;
    position: absolute;
    z-index: 1;
}

.header_logo{
    margin-left: 4rem;
}

.navbar {
margin: 0 auto;
}

ul{
    display: flex;
    li{
        list-style: none;
        margin: 1rem;
    }

    a{
        text-decoration: none;
        text-transform: uppercase;
        color: black;
    }
}

.changer{
    display: flex;
    margin-right: 1.5rem;
    
    .menu{
         cursor: pointer;
         margin-right: 1rem;
         display: none;
    }
}

.closed.close{
   display: none; 
}

Answer 1

我认为你应该只尝试将

classname

更改为

className

(camelCase):

<div className="changer">
    <MenuBookOutlined className="menu"/>
</div>

我们需要在类名之间添加一个额外的空格，使关闭图标更加具体（现在没有空格）

.closed .close {
  display: none;
}

我希望这有帮助。