CSS отображается некорректно

Итак, мой проект работает на django backend с React для frontend. Проблема, с которой я столкнулся, заключается в том, что мои компоненты react отображаются, но они не структурированы правильно (поля перепутаны, нет границ, компоненты перекрываются), хотя мой CSS правильный. Я думаю, что причина в base.html в части проекта django, так как webpack собирается через него. Я пробовал добавлять ссылки на ссылки, но безрезультатно.

Примечание* Я импортирую Dashboard как const в класс UserApp, который, хотя я не думаю, что является причиной проблемы, может быть виновником, не уверен.

Как это должно выглядеть: https://postimg.cc/TKKtL00S

Как это выглядит: https://postimg.cc/qhwsZ6Qy

Base.html:

    {% block css %}
    {% compress css %}
    <!-- <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}"> -->
    <link rel="stylesheet" href="{% static 'css/font-awesome.css' %}">
    <link rel="stylesheet" href="{% static 'css/LineIcons.css' %}">
    <link rel="stylesheet" href="{% static 'css/materialdesignicons.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/fullcalendar.css' %}">
    <link rel="stylesheet" href="{% static 'css/fullcalendar.css' %}">
    <link rel="stylesheet" href="{% static 'css/main.css' %}">
    <!-- <link rel="stylesheet" href="../../../rsm-app-react/Dashboard.css"> -->
    {% endcompress %}
    {% compress css %}
    <!-- <link href="{% static 'css/app.css' %}" rel="stylesheet"> -->
    {% endcompress %}
    {% endblock %}
    {% block css_extra %}
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/material.css">

    {% endblock %}
  </head>

  <body>

    <div id="app">
    </div>

    {% block javascript %}
      <!-- Latest JQuery -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
      <!-- place project specific Javascript in this file -->
      {% compress js %}
      <script src="{% static 'js/bootstrap.js' %}"></script>
      <script src="{% static 'js/project.js' %}"></script>
      <script src="{% static 'js/Chart.min.js' %}"></script>
      <script src="{% static 'js/dynamic-pie-chart.js' %}"></script>
      <script src="{% static 'js/moment.min.js' %}"></script>
      <script src="{% static 'js/fullcalendar.js' %}"></script>
      <script src="{% static 'js/jvectormap.min.js' %}"></script>
      <script src="{% static 'js/world-merc.js' %}"></script>
      <script src="{% static 'js/polyfill.js' %}"></script>

      {% endcompress %}
    {% endblock javascript %}
    {% block javascript_extra %}
      {% comment %} {% render_bundle 'vendor' %}
      {% render_bundle 'main' %} {% endcomment %}
    {% endblock %}
  </body>
</html>

Dashboard.js:

UserApp.js:

class UserApp extends Component {

  componentDidMount(){
    const {dispatch} = this.props
    dispatch(fetchUser())
  }

  render() {
    const {user}  = this.props
    return (
      <>
        <Dashboard/>
      </>
    )
  }
}
function mapStateToProps(state) {
  return {
    user: state.user,
  }
}

function mapDispatchToProps(dispatch) {
  return {
    saveUser: (user) => dispatch(saveUser(user)),
    changeUserName: (name) => dispatch(changeUserName(name)),
    dispatch: dispatch
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(UserApp)
Вернуться на верх