材质UI图标在Heroku上托管我的MERN堆栈项目时不可见

Question

我正在做一个MERN堆栈项目，我已经创建了一个侧栏，并使用了材质UI的图标。侧边栏在本地工作得很好，但是当我打开相同的heroku链接时，图标不可见。(见下图以便更好地理解)

注意:我已经使用了仪表板上的图标，只有在您登录后才能看到。

本地运行时的图像:本地

Heroku上的图片:在Heroku

我的侧边栏代码:

import React, {useContext} from "react"
import "./Sidebar.css"
import { NavLink, Link } from "react-router-dom";
import MenuIcon from '@material-ui/icons/Menu';
import HomeIcon from '@material-ui/icons/Home';
import EqualizerIcon from '@material-ui/icons/Equalizer';
import SearchIcon from '@material-ui/icons/Search';
import PersonIcon from '@material-ui/icons/Person';
import { Icon } from 'semantic-ui-react'
import { UserContext } from '../pages/AuthContext';

class Sidebar extends React.Component {
constructor(props){
super(props);
this.state = {
isSidebarOpen: false,
username: props.username,
userId: props.userId,
sidebarClass: "sidenav",
};
this.onClickSidebarOpen = this.onClickSidebarOpen.bind(this)
}
onClickSidebarOpen(){
this.setState(prevState => {
if(!prevState.isSidebarOpen)
{
return {
isSidebarOpen: true,
sidebarClass: "sidenavOpen",
}
}
else if(prevState.isSidebarOpen)
{
return {
isSidebarOpen: false,
sidebarClass: "sidenav",
}
}
})
}
render(){
return (
<div className={this.state.sidebarClass} >
<ul>
<span onClick={this.onClickSidebarOpen} className="hamburger">
<li className="hamburger"><a>
<span className="icons">
<MenuIcon />
</span>
</a>
</li>
</span>
<span>
<li className="sidenav-item">
<NavLink to="/dashboard">
<span className="icons">
<HomeIcon />
</span>
<span className="options">SkillBoard</span>
</NavLink>
</li>
<li className="sidenav-item">
<Link to = "/overall-analytics">
<span className="icons">
<EqualizerIcon /> 
</span>
<span className="options">Analytics</span>
</Link>
</li>
<li className="sidenav-item">
<NavLink to="/Review-more">
<span className="icons">
<SearchIcon />
</span>
<span className="options">ReviewMore</span>
</NavLink>
</li>
<li className="sidenav-item">
<NavLink to={`/profile/${this.state.username}`}>
<span className="icons">
<PersonIcon />
</span>
<span className="options">Profile</span>
</NavLink>
</li>
<li className="sidenav-item">
<NavLink to = {`/portfolio/${this.state.userId}`} target ="_blank" >
<span className="icons">
<Icon name='address book' />
</span>
<span className="options">Portfolio</span>
</NavLink>
</li>
</span>
</ul>
</div>
)
}
}
function SidebarFunc() {
const [user, setUser] = useContext(UserContext);
return (
<Sidebar username = {user.username} userId = {user.id} />
);
}

export default SidebarFunc;

我的包。前端Json:

{

"name": "skillly",
"version": "0.1.0",
"private": true,
"dependencies": {
"@amcharts/amcharts4": "^4.10.18",
"@ckeditor/ckeditor5-alignment": "^28.0.0",
"@ckeditor/ckeditor5-basic-styles": "^28.0.0",
"@ckeditor/ckeditor5-block-quote": "^28.0.0",
"@ckeditor/ckeditor5-build-balloon": "^28.0.0",
"@ckeditor/ckeditor5-ckfinder": "^28.0.0",
"@ckeditor/ckeditor5-essentials": "^28.0.0",
"@ckeditor/ckeditor5-react": "^3.0.2",
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.58",
"@testing-library/jest-dom": "^5.11.5",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"apexcharts": "^3.25.0",
"autosize": "^4.0.2",
"axios": "^0.21.1",
"bootstrap": "^4.5.3",
"flesch": "^1.0.5",
"flesch-kincaid": "github:daveross/flesch-kincaid",
"font-awesome": "^4.7.0",
"gasp": "0.0.2",
"gsap": "^3.6.0",
"html-react-parser": "^1.2.6",
"loadash": "^1.0.0",
"moment": "^2.29.1",
"node-sass": "^5.0.0",
"react": "^17.0.1",
"react-apexcharts": "^1.3.7",
"react-bootstrap": "^1.4.0",
"react-dom": "^17.0.1",
"react-facebook-login": "^4.1.1",
"react-google-login": "^5.2.2",
"react-gsap": "^2.2.1",
"react-hook-reading-time": "^1.0.0",
"react-html-parser": "^2.0.2",
"react-icons": "^4.2.0",
"react-moment": "^1.1.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"react-textarea-autosize": "^8.3.0",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^2.0.3",
"syllables": "^1.0.0",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:5000/"
}

My Application logs on Heroku:

2021-08-09T14:59:26.562853+00:00 app[web.1]: hello
2021-08-09T14:59:26.567157+00:00 app[web.1]: hello
2021-08-09T14:59:26.567425+00:00 app[web.1]: hello
2021-08-09T14:59:26.567864+00:00 app[web.1]: hello
2021-08-09T14:59:26.568073+00:00 app[web.1]: hello
2021-08-09T14:59:26.568463+00:00 app[web.1]: hello
2021-08-09T14:59:26.568890+00:00 app[web.1]: hello
2021-08-09T14:59:26.569304+00:00 app[web.1]: hello
2021-08-09T14:59:26.570934+00:00 app[web.1]: hello
2021-08-09T14:59:26.600456+00:00 heroku[router]: at=info method=GET path="/api/overallAnalytics/60ba74fe58bb8d6268e11971" host=skillly1.herokuapp.com request_id=d0f82226-eecf-4bdd-b408-66ae6cff8d81 fwd="117.97.166.236" dyno=web.1 connect=0ms service=1664ms status=304 bytes=184 protocol=https

我的项目存储库(托管在heroku上)Github回购

我的heroku网站链接:链接到网站

我是MERN堆栈和Heroku的新手，这就是为什么我很难弄清楚我到底做错了什么。请帮助! !

我不太确定究竟是什么导致了这样的错误，所以如果你想让我在问题中添加任何其他内容，请告诉我。

Answer 1

原来我在这些图标的CSS中使用了opacity: 75%，由于某种原因使这些图标的不透明度在DOM上为1%。我把它完全从CSS中删除了，现在它工作得很好。