Есть ли способ не использовать! Важно так много в S CSS (реагировать + материал) - PullRequest
Новая
       8

Есть ли способ не использовать! Важно так много в S CSS (реагировать + материал)

0 голосов
/ 10 января 2020

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

Я не смог найти другой способ перекомпоновки CSS компонента, но с использованием универсального пользовательского интерфейса c материала классы. Однако, в конце концов, кажется, мне пришлось все время использовать! 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 мне пришлось использовать общие c классы и! Важный рядом с каждым значением, чтобы оно могло работать.

Любые мысли о том, как я могу улучшить 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;
}

1 Ответ

0 голосов
/ 10 января 2020

Не могли бы вы визуализировать файл SCSS / CSS после импорта скрипта? Таким образом, он будет перезаписан без использования важного тега.

...