blocks|key|4342689|text|将您的类名放在mat-form-field元素上。这对所有输入都有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4342690|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Put your class name on the mat-form-field element. This works for all inputs.

blocks|key|4343082|text|Angular材质11.2.6|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4343083|++++++<mat-select+class="text-sm">
++++++++<mat-option>+Text+</mat-option>
++++++</mat-select>|code-block|syntax|javascript|4343084|其中text-sm+(截至顺风)|4343085|.text-sm+{font-size:+0.75rem}|4343086|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Angular material 11.2.6
<pre><code> &lt;mat-select class=&quot;text-sm&quot;&gt;
 &lt;mat-option&gt; Text &lt;/mat-option&gt;
 &lt;/mat-select&gt;
</code></pre>
Where text-sm (as of tailwind)
<pre><code>.text-sm {font-size: 0.75rem}
</code></pre>

blocks|key|4342776|text|这是一个完全成熟的样式垫选择的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4342777|HTML如下：|4342778|<mat-form-field+class="booking-facility">
++<mat-select+disableOptionCentering+placeholder="facility"+panelClass="booking-facility-select"+[ngModel]="facilityId"
++++++++++++++++++++++(ngModelChange)="updateFacility($event)">
++++<mat-option+*ngFor="let+fac+of+facilities+%7C+keyvalue"+[value]="fac.value.id">
++++++{{+fac.value.name+%7C+lowercase+}}
++++</mat-option>
++</mat-select>
</mat-form-field>|code-block|syntax|javascript|4342779|SCSS如下(使用全局样式表，即styles.scss)：|4342780|.booking-facility-styles+{
++font-family:+"Nunito+Sans",+-apple-system,+BlinkMacSystemFont,+"Segoe+UI",+Roboto,+"Helvetica+Neue",+Arial,+sans-serif;
++letter-spacing:+1px;
++font-size:+22px;
++color:+#55595C;
}

.booking-facility+{
++//+label
++@extend+.booking-facility-styles;

++//+label
++.mat-form-field-label+{
++++@extend+.booking-facility-styles;
++++color:+#BBB+!important;
++}

++.mat-select-value-text+{
++++//+select
++++@extend+.booking-facility-styles;
++}
}

.booking-facility-select+.mat-option+{
++//+options
++@extend+.booking-facility-styles;
++font-size:+16px+!important;
}|4342781|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Here's a fully fledged solution for styling mat select.
HTML follows:
<pre><code>&lt;mat-form-field class=&quot;booking-facility&quot;&gt;
 &lt;mat-select disableOptionCentering placeholder=&quot;facility&quot; panelClass=&quot;booking-facility-select&quot; [ngModel]=&quot;facilityId&quot;
 (ngModelChange)=&quot;updateFacility($event)&quot;&gt;
 &lt;mat-option *ngFor=&quot;let fac of facilities | keyvalue&quot; [value]=&quot;fac.value.id&quot;&gt;
 &lt;span&gt;{{ fac.value.name | lowercase }}&lt;/span&gt;
 &lt;/mat-option&gt;
 &lt;/mat-select&gt;
&lt;/mat-form-field&gt;
</code></pre>
SCSS follows (use global stylesheet, namely styles.scss):
<pre><code>.booking-facility-styles {
 font-family: &quot;Nunito Sans&quot;, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, sans-serif;
 letter-spacing: 1px;
 font-size: 22px;
 color: #55595C;
}

.booking-facility {
 // label
 @extend .booking-facility-styles;

 // label
 .mat-form-field-label {
 @extend .booking-facility-styles;
 color: #BBB !important;
 }

 .mat-select-value-text {
 // select
 @extend .booking-facility-styles;
 }
}

.booking-facility-select .mat-option {
 // options
 @extend .booking-facility-styles;
 font-size: 16px !important;
}
</code></pre>

blocks|key|4343153|text|在css中复制此代码以使宽度达到100%25|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4343154|mat-form-field+{
++width:+100%25;
}|code-block|syntax|javascript|4343155|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

In css copy this code to make 100% width
<pre><code>mat-form-field {
 width: 100%;
}
</code></pre>

blocks|key|4342833|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4342834|++.mat-form-field+.mat-input-element,+.mat-form-field+.mat-select,
++.mat-form-field.mat-form-field-appearance-legacy+.mat-input-element,
++.mat-form-field.mat-form-field-appearance-legacy+.mat-select+{
++++background-color:+#0A0A0A+!important;

++++.mat-select-value+{
++++++color:+#fefefe+!important;
++++++font-size:+14px+!important;
++++++font-weight:+$font-w-light;
++++}
++}|code-block|syntax|javascript|4342835|4342836|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code> .mat-form-field .mat-input-element, .mat-form-field .mat-select,
 .mat-form-field.mat-form-field-appearance-legacy .mat-input-element,
 .mat-form-field.mat-form-field-appearance-legacy .mat-select {
 background-color: #0A0A0A !important;

 .mat-select-value {
 color: #fefefe !important;
 font-size: 14px !important;
 font-weight: $font-w-light;
 }
 }</code></pre>
</div>
</div>

How to style mat-select's panel component. From the docs I get that I need to provide panelClass so I make it like this: 

<pre><code>&lt;mat-form-field&gt;
 &lt;mat-select placeholder="Search for"
 [(ngModel)]="searchClassVal"
 panelClass="my-select-panel-class"
 (change)="onSearchClassSelect($event)"&gt;
 &lt;mat-option *ngFor="let class of searchClasses" [value]="class.value"&gt;{{class.name}}&lt;/mat-option&gt;
 &lt;/mat-select&gt;
&lt;/mat-form-field&gt;
</code></pre>

I inspected in developer tools that this class is attached to the panel in DOM and it is attached. So I have my custom scss class attached to this element. Now when I provide css it just don't work. My scss for example looks like this:

<pre><code>.my-select-panel-class {
 width:20px;
 max-width:20px;
 background-color: red;
 font-size: 10px;
}
</code></pre>

The width of the panel is always equal to the <code>width</code> of the select element. Sometimes In options You have too long strings and I would like to make it a little bit wider. Is there any way how to do this. My style from my component just not working even <code>background-color</code> is not working. Does somebody knows why this behaves so strange?

I'm using:
Angular 4.4.5
@angular/material: 2.0.0-beta.12

Styling mat-select in Angular Material

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

如何设置mat-select的面板组件的样式。从文档中我得到我需要提供panelClass，所以我这样做：<mat-form-field> <mat-select placeholder="Search for" [(ngModel)]="searchClassVal" panelClass="my-se...

问在Angular材质中选择样式垫
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Angular材质中选择样式垫EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Angular材质中选择样式垫
EN