Angular материал коврик - выбор стилей - PullRequest
Новая
       8

Angular материал коврик - выбор стилей

0 голосов
/ 24 марта 2020

, пожалуйста, не голосуйте за меня. Я новичок. Я использую angular 8.0.0, angular материал и Fuse Theme в качестве панели администратора . Проблема заключается в том, что всякий раз, когда я изменяю стиль mat-select, он применяется, но после одного или двух refre sh материал angular отменяет изменения локального компонента и применяет значение по умолчанию. Также он применяется ко всем компонентам. Как я могу изменить стиль только одного одиночного выбора?

часть моего html, где проблема: 

   <form>
    <mat-form-field>
        <mat-label class="label-colors"> bla bla </mat-label>
        <mat-select formControlName="">
            <mat-option value="active" class="empty-select">bla bla</mat-option>
            <mat-option value="inactive" >bla bla</mat-option>
        </mat-select>
       </mat-form-field>
       <mat-form-field>
        <mat-label class="label-colors"></mat-label>
        <mat-select formControlName="isReserved">
            <mat-option value="active"></mat-option>
            <mat-option value="inactive"></mat-option>
        </mat-select>
       </mat-form-field>
      </form>

s css file: 

.mat-select-arrow{
    color: rgba(255, 255, 255, 0.54)!important;
  }
  .label-colors {
    color: #ffffff !important;
    font-size: 16px;
  }

  // mat-input caret color
  .input-element-color {
    caret-color: #ffffff !important;
  }
  .blue{
    background-color: blue; 
}
.mat-form-field-underline{
  background-color: rgb(61, 82, 89)!important;
}
.date-icons{
    color: #ffffff !important;
    width: 100%;
    height: 100%;
   }
   th{
    font-weight: bold !important ;
    color:black !important;
    font-size: 14px !important;
  }
  // .mat-select-value-text{
  //   color: #fff!important;
  // }

  .mat-form-field{
    //width: 155px; 
    margin: 3px;
  }
  // body.theme-default .mat-select-value{
  //   color: rgba(255, 255, 255, 0.87);
  // }
  .editdeleteicon{
    color: #003042;
  }
  .fix-text{
    white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 88px; 
   padding: 0 10px !important;
  }
  .fix-text :hover{
    overflow: visible;

}

попробовал каждое предложение на stackoverflow, но, кажется, не может изменить цвет mat-select и сохранить его таким образом, даже если я могу, когда я изменяю оно меняется везде. Я надеюсь, что все ясно

ОБНОВЛЕНИЕ: Исправлено добавлением поля mat-form-field, а затем в s css

 .example-class{
    // inside this class added:
    .mat-select-value-text {
        color: red;
    }
    }

1 Ответ

0 голосов
/ 24 марта 2020

вы использовали! Важный, который иногда полезен для перезаписи css, но в этом случае у вас есть кое-что еще, потому что он является частью модуля angular материала. Итак, у вас есть 2 варианта:

1- add :: ng-deep перед классом. например

::ng-deep .className { color: blue !important }

2- Или вы должны написать то же, что написали там, но в стиле. css (или style.s css в зависимости от того, если вы вы используете css или s cc), но это будет означать, что эти изменения будут применяться к компоненту повсюду в вашем приложении, поэтому, например, если вы используете mat-select в другой части вашего приложения, ваши изменения здесь будут влиять это потому, что область действия style.css / style.s css присутствует во всех приложениях.

Таким образом, вы можете выбрать нужный метод.

Надеюсь, это поможет вам!

...