atom-material-ui overwrite file-icon css when VCS Coloring is set to true

[mrleblanc101]

atom-material-ui theme overwrite important CSS from file-icons when VCS Coloring is set to true in atom tabs package.

Reproduction Steps:

1. Install atom-material-ui
2. Install file-icon
3. Disable Colored and enable Show icon in tab inside file-icon
4. Enable VCS Coloring in atom tabs package

Expected behavior:

The file-icon in the tab bar should reflect the git status color (yellow = modified, green = new) just like in tree-view (see screenshot below).

Observed behavior:

The problem is that atom-material-ui overwrite some important CSS for this package with this CSS:

.amu-tinted-tab-bar atom-pane .tab-bar .tab .title[data-path]::before {
    color: rgba(255, 255, 255, 0.8) !important;
}
atom-pane .tab-bar .tab .title[data-path]::before {
    margin-right: 16px;
    color: rgba(131, 148, 150, 0.65) !important;
}

The overwritten CSS:

.status-modified {
    color: #FFCA28;
    text-shadow: none;
}

Screenshots and GIFs

Atom version: 1.20.1 OS and version: macOS 10.13.1 (beta 1)

Installed packages:

atom-beautify@0.30.5 atom-clock@0.1.15 atom-ide-ui@0.4.0 atom-material-ui@2.0.4 atom-typescript@11.0.9 autoclose-html@0.23.0 docblockr@0.11.0 double-tag@0.9.0 emmet@2.4.3 file-icons@2.1.12 font-preview@0.1.1 highlight-selected@0.13.1 ide-typescript@0.1.6 language-antlers@0.3.4 minimap@4.29.7 minimap-cursorline@0.2.0 minimap-find-and-replace@4.5.2 minimap-git-diff@4.3.1 minimap-highlight-selected@4.6.1 minimap-pigments@0.2.2 minimap-selection@4.5.0 php-twig@4.0.0 pigments@0.40.2 platformio-ide-terminal@2.7.0 svg-preview@0.11.0 svgo@2.8.5 sync-settings@0.8.3 tab-preview@0.8.0 tag@0.5.0 tree-view-autoresize@2.2.0 tree-view-scope-lines@0.2.0