css 如何设计特定材质的样式

fnatzsnv 于 2023-08-09 发布在其他

关注(0)|答案(2)|浏览(109)

我在一个Angular 9项目中工作，使用Material。
我有一个页面，有一些材料选择，和一个材料分页器（它使用下拉菜单来更改每页的项目）。我想修改分页器的垫子选择中垫子选项的样式，但我不希望这影响页面上的其他垫子选择。
使用此选项可编辑页面上的所有垫选择。

::ng-deep mat-option:last-child:before {
  content: "All";
  float: left;
  text-transform: none;
  top: 4px;
  position: relative;
}
::ng-deep mat-option:last-child .mat-option-text {
  display: none;
  position: relative;
}

字符串
但我需要指定只修改分页器选择的选项。我试着在mat-paginator中添加一个类，但是没有成功。

<mat-paginator class="myStyleClass" [pageSizeOptions]="[10, 25, dataSource?.filteredData.length]"
      [showFirstLastButtons]="true" (page)="setPaginatorInRoute()" >
    </mat-paginator>

型
我也做了一个快速https://stackblitz.com/edit/style-specific-mat-select
有没有一种方法来指定我选择的垫子样式？

css

来源：https://stackoverflow.com/questions/61641236/how-to-style-a-specific-material-select

2条答案

按热度按时间

ymzxtsji1#

ng-deep已被弃用，因此您应该使用没有封装的组件，因此：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class CustomComponent {}

@Component({
  selector: 'app-custom',
  templateUrl: './custom.component.html',
  styleUrls: ['./custom.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class CustomComponent {}

字符串
你创建的css类应该将其封装在一个div中，并以这种方式定义它们：
CSS

.custom-style-paginator-select {
  mat-option:last-child:before {
    content: "All";
    float: left;
    text-transform: none;
    top: 4px;
    position: relative;
  }
  mat-option:last-child .mat-option-text {
    display: none;
    position: relative;
  }
}

型
超文本标记语言

<div class="custom-style-paginator-select">
  <mat-paginator class="myStyleClass" [pageSizeOptions]="[10, 25, dataSource?.filteredData.length]" [showFirstLastButtons]="true" (page)="setPaginatorInRoute()" >
  </mat-paginator>
</div>

型
有关详细信息，请参阅：
https://angular.io/guide/component-styles#view-encapsulation
https://material.angular.io/guide/customizing-component-styles
https://material.angular.io/guide/theming#defining-a-custom-theme

赞(0）回复(0）举报 2023-08-09

ubby3x7f2#

下面是CSS代码示例：

/* -------------- */
/* Other elements */
/* -------------- */
::ng-deep .mdc-list-item:not(.mdc-list-item--selected) {
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    font-weight: bold;
    font-size: 1rem;
}

::ng-deep .mdc-list-item:not(.mdc-list-item--selected) div {
    background-color: rgba(255,255,255,0.3); /* Fourth number is for transparency level */
}

::ng-deep .mdc-list-item:not(.mdc-list-item--selected) .mdc-list-    item__primary-text {
    color: red; /* Text color */
}

/* ---------------- */
/* Selected element */
/* ---------------- */
::ng-deep .mdc-list-item--selected {
    font-family: Calibri, sans-serif;
    font-weight: bold;
    font-size: 2rem;
}

::ng-deep .mdc-list-item--selected div {
    background-color: rgba(255,255,255,0.1); /* Fourth number is for transparency level */
}

::ng-deep .mdc-list-item--selected .mdc-list-item__primary-text {
    color: white; /* Text color */
}

字符串

的数据

赞(0）回复(0）举报 2023-08-09

我来回答

css 如何设计特定材质的样式

2条答案

相关问题

热门标签

最新问答