Миграция на материал ui v.4 xx проблема с css

Question

У меня сложная задача по переносу версии пользовательского интерфейса материала с 0.20 до 4.9.0 (последняя версия). Я изменил весь импорт и изменения компонентов, но у меня есть ОСНОВНАЯ проблема с css. Мы используем файл main.s css, в котором мы настраиваем наши компоненты. Предположим, мы говорим о компоненте AppBar. В старой версии пользовательского интерфейса материала у меня есть такой код компонента:

import React from 'react';
import AppBar from 'material-ui/AppBar';
import DropDownMenu from 'material-ui/Select';
import MenuItem from 'material-ui/MenuItem';

const AppBarTop = () => (
  <div className="euro-header">
    <AppBar className="euro-appbar">
      <DropDownMenu
        className="euro-usermenu"
        value={1}
        selectedMenuItemStyle={styles.selected}
        menuStyle={styles.popup}
      >
        <MenuItem
          value={1}
          label="Δημήτρης Παπαδόπουλος"
          primaryText="Ιστορικό Λαθών"
        />
        <MenuItem
          value={2}
          label="Δημήτρης Παπαδόπουλος"
          primaryText="Ιστορικό χρήστη"
        />
        <MenuItem
          value={3}
          label="Δημήτρης Παπαδόπουλος"
          primaryText="Διαχείριση προφίλ"
        />
        <MenuItem
          value={4}
          label="Δημήτρης Παπαδόπουλος"
          primaryText="Αποσύνδεση"
        />
      </DropDownMenu>
    </AppBar>
  </div>
);

и классифицированы css:

.euro-header {
  width:100%;
  position:fixed;
  left:0;
  top:0;
  z-index:999!important;
}

.euro-appbar {
  background-color: rgb(255, 255, 255)!important;
}

.euro-appbar > button > div > svg {
  fill:rgb(0, 0, 0)!important;
}
.euro-usermenu {
  height:50px!important;
  margin:7px 0 0 20px!important;
  padding-left:40px!important;
  background-repeat:no-repeat;
  background-position:0px 0px;
}

.euro-usermenu > div > div {
  margin-top:-1px;
  border:0px!important;
}

.euro-usermenu svg {
  fill:#000!important;
}

Вывод такой:

Теперь с обновленной версией пользовательского интерфейса материала я переписываю свой компонент следующим образом:

import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';


const styles = {
  selected: {
    color: 'black',
  },
  popup: {
    width: '230px',
  },
};

/** Renders the application's main upper bar */

const AppBarTop = () => (
  <div className="euro-header">
    <AppBar
      position="static"
      className="euro-appbar"
      zDepth={1}
      showMenuIconButton
    >
      <Select
        className="euro-usermenu"
        value={1}
        selectedMenuItemStyle={styles.selected}
        menuStyle={styles.popup}
      >
        <MenuItem
          value={1}
          label="Δημήτρης Παπαδόπουλος"
          primaryText="Ιστορικό Λαθών"
        />
        <MenuItem
          value={2}
          label="Δημήτρης Παπαδόπουλος"
          primaryText="Ιστορικό χρήστη"
        />
        <MenuItem
          value={3}
          label="Δημήτρης Παπαδόπουλος"
          primaryText="Διαχείριση προφίλ"
        />
        <MenuItem
          value={4}
          label="Δημήτρης Παπαδόπουλος"
          primaryText="Αποσύνδεση"
        />
      </Select>
    </AppBar>
  </div>
);


export default AppBarTop;

с точно таким же css. Также я использовал StypesProvider injectFirst для переопределения стилей пользовательского интерфейса, но вывод выглядит примерно так:

Знаете ли вы, что я могу сделать, чтобы это исправить? Должен ли я изменить все css классы? Спасибо!