Есть ли способ не использовать! Important так много в SCSS (react + material)

Я работаю над компонентом Select в React, используя Material UI. В проекте используется внешний лист SCSS, импортированный в файл сценария для компонента.

Я не мог найти другого способа изменить стиль CSS компонента, кроме использования общих классов пользовательского интерфейса материала. Однако, в конце концов, кажется, мне все время приходилось использовать! Important, чтобы перезаписать атрибуты.

.Js выглядит так:

<Select
    value={this.state.age}
    onChange={this.handleChange}
    name="age"
    displayEmpty
    className='select-row-items'
    IconComponent = {ExpandMore}
    MenuProps={{
        anchorOrigin: {
            vertical: "bottom",
            horizontal: "left"
        },
        transformOrigin: {
            vertical: "top",
            horizontal: "left"
        },
        getContentAnchorEl: null
    }}>
    <MenuItem disableGutters={true} value="">123-456-789123456-01</MenuItem>
    <MenuItem disableGutters={true} value={10}>123-000-457889562-00</MenuItem>
    <MenuItem disableGutters={true} value={20}>122-586-888865987-00</MenuItem>
</Select>

Я могу стилизовать компоненты только непосредственно в className 'select-row-items', который я назначил себе. Для MenuItems мне пришлось использовать общие классы и! Important рядом с каждым значением, чтобы оно могло работать.

Есть мысли о том, как улучшить CSS?

Мой CSS выглядит так:

.select-row-items {

  .MuiSelect-select {
    background-color: #D5E4EE; //replace with variables for secondary colors (light blue)
    color: #194581; //replace with variables for secondary colors (dark blue)
    font-size: 12px;
    font-weight: normal;
    padding: 4px 12px;

    &.MuiSelect-select {
      padding-right: 36px;
    }

    &:focus {
      background-color: #D5E4EE; //replace with variables for secondary colors (light blue)
    }

    &::after {
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 25px;
      background-color: rgba(0, 0, 0, 0.1);;
    }
  }

  .MuiSelect-icon {
    font-size: 16px;
    color: #194581; //replace with variables for secondary colors (dark blue)
    font-weight: lighter;
    right: 4.5px;
    top: 50%;
    transform: translateY(-50%);
  }

  &.MuiInput-underline:before,
  &.MuiInput-underline:hover:not(.Mui-disabled):before,
  &.MuiInput-underline:after {
    display: none;
  }
}

.MuiList-root {
  padding: 0 !important;
  background-color: #D5E4EE; //replace with variables for secondary colors (light grey)

}
.MuiPopover-paper {
  left: 0!important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.MuiMenuItem-root {
  font-size: 12px !important;
  color: #194581 !important; //replace with variables for secondary colors (dark blue)
  font-weight: normal;
  padding: 5px 12px !important;
  border-bottom: 1px solid #fff !important;

  &:first-child {
    border-top: 1px solid #fff !important;
  }
}

.MuiListItem-button:hover, .MuiListItem-root.Mui-selected:hover {
  background-color: #194581 !important; //replace with variables for secondary colors (dark blue)
  color: #ffffff !important;
}

.MuiListItem-root.Mui-selected {
  background-color: rgba(0, 0, 0, 0.1) !important;
}