Question

使用Angular和Material Design组件创建手机的Web应用程序时遇到了问题。为了使我的网络应用程序能够在手机上正常运行，它需要有小按钮和小选择语句。不幸的是，看起来框架正在为select元素添加一个样式语句。该样式语句指定元素的宽度，它指定的宽度太大。如何指定小的select语句？

以下是两个输入文件的关键部分：app.component.html和app.component.css。第三部分显示了Angular2生成的代码，正如我在Chrome的开发人员工具中看到的那样。该代码的关键部分是样式语句（style =“width：139.325px;”）。如果我使用开发工具更改宽度，那么我可以获得我想要的按钮大小。我只是不知道如何使用CSS文件获得我想要的大小。

----  Resulting Ang2 Code -----

<md-select _ngcontent-c0="" placeholder="Number of players" role="listbox" ng-reflect-model="4" ng-reflect-placeholder="Number of players" class="ng-untouched ng-pristine ng-valid mat-select" tabindex="0" aria-label="Number of players" aria-required="false" aria-disabled="false" aria-invalid="false" aria-owns="md-option-0 md-option-1 md-option-2 md-option-3 md-option-4 md-option-5 md-option-6 md-option-7 md-option-8"><div cdk-overlay-origin="" class="mat-select-trigger"><span class="mat-select-placeholder mat-floating-placeholder" style="width: 139.325px;">Number of players </span><!--bindings={
  "ng-reflect-ng-if": "[object Object]"
}--><span class="mat-select-value"><span class="mat-select-value-text">4</span> </span><span class="mat-select-arrow"></span> <span class="mat-select-underline"></span></div><!--bindings={
  "ng-reflect-origin": "[object Object]",
  "ng-reflect-positions": "[object Object],[object Object",
  "ng-reflect-offset-x": 0,
  "ng-reflect-offset-y": 0,
  "ng-reflect-min-width": "152.3249969482422",
  "ng-reflect-backdrop-class": "cdk-overlay-transparent-backdr",
  "ng-reflect-has-backdrop": "",
  "ng-reflect-open": false
}--></md-select>

---- My attempt to override the css for the select statement in app.component.css -----

md-select{
    font-size: 10px;
    padding: 1px;
    min-width: 12px;
}
md-option{
    font-size: 10px;
    padding: 1px;
    min-width: 12px;
}

---- My app.component.html ---------

<md-select placeholder="Number of players" [(ngModel)]="numPlayers" (ngModelChange)="onChangeNumPlayers()" >
   <md-option *ngFor="let mynum of numberOfPlayersList" [value]="mynum.value">{{ mynum.name }}</md-option>
</md-select>

Answer 1

我的朋友来自罗马尼亚的Sergiu帮我解决了这个问题。该框架创建了封装md-select和md-option元素的元素。您无法使用app.component.css为md-select和md-option之外的元素设置样式。为了控制这些元素，您需要将它们添加到基本styles.css文件中。这些类足以缩小我的select语句。

.mat-select,
.mat-select-trigger,
.mat-select-placeholder,
.cdk-overlay-pane,
.mat-select-panel,
.mat-select-content
{
    min-width: 40px !important;
    width: 40px !important;
}
.mat-option {
    padding: 0 2px!important;
}

难以为Angular Material Web应用程序创建非常小的精选语句

1 个答案: