【发布时间】：2021-08-10 16:31:52
【问题描述】：
我正在开发一个 MERN 堆栈项目，为此我创建了一个侧边栏并为图标使用了 Material UI。侧边栏在本地工作得很好，但是当我打开 heroku 链接时，图标不可见。 （请参阅下面的图片以更好地理解）
注意：我使用了仪表板上的图标，这些图标只有在您登录后才能看到
本地运行时的图像： Locally
托管在 Heroku 上时的图像： On 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;
我的 Package.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/"
}
我的应用程序登录 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 Repo
我的heroku网站链接：Link to website
我是 MERN 堆栈和 Heroku 的新手，这就是为什么我很难弄清楚我到底做错了什么。请帮忙！！
我不确定究竟是什么导致了这样的错误，所以如果你想让我在问题中添加任何其他内容，请告诉我。
【问题讨论】：
-
在托管页面上检查您的 DOM，您的图标是否存在于 DOM 结构中？页面代码检查器中还有一些错误？另外，console.log sideBarClass 在 onClickSidebarOpen 里面检查是否是变量的问题。
-
@IlliaChil 是的，我确实检查了 DOM。图标在那里。他们的 HTML 出现了，并且占用了一些高度和宽度。然而由于某种原因，它们不可见
标签： javascript reactjs heroku material-ui mern