Блог

Я работаю над проектом стека MERN, для которого я создал боковую панель и использовал пользовательский интерфейс Material для значков. Боковая панель отлично работает локально, но когда я открываю ссылку 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/"
}
 

Мое приложение регистрируется на 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 stack и Heroku, поэтому мне трудно понять, что именно я делаю не так. Пожалуйста, Помогите!!

Я не совсем уверен, что именно вызывает такую ошибку, поэтому, если вы хотите, чтобы я добавил что-нибудь еще к вопросу, дайте мне знать.

Оказывается, я использовал opacity: 75% в CSS эти значки, которые по какой-то причине делали непрозрачность этих значков равной 1% в DOM. Я полностью удалил его из CSS, и теперь он отлично работает.