要在显示选项时修改 `mat-select` 的样式，你可以使用 CSS 来实现。以下是一些常见的方法：
1. **使用 `:hover` 伪类**：当鼠标悬停在 `mat-select` 上时，可以应用特定的样式。例如，你可以更改背景颜色、边框颜色或字体颜色。
```css
.mat-select:hover {
background-color: #f5f5f5;
border-color: #3f51b5;
color: #3f51b5;
}
```
2. **使用 `:focus` 伪类**：当 `mat-select` 获得焦点时，可以应用不同的样式。这可以帮助用户明确当前选中的元素。
```css
.mat-select:focus {
border-color: #3f51b5;
box-shadow: 0 0 0 0.2rem rgba(63, 81, 181, 0.25);
}
```
3. **修改选项的样式**：你可以通过选择器直接修改 `mat-select` 下拉菜单中选项的样式。例如，更改选项的字体、颜色或背景颜色。
```css
.mat-select-panel mat-option {
font-size: 16px;
color: #333;
background-color: #f5f5f5;
}
```
4. **使用自定义类**：如果你希望更灵活地控制样式，可以为 `mat-select` 添加自定义类，并在 CSS 中针对该类进行样式设置。
```html
<mat-select class="custom-select">
<!-- 选项 -->
</mat-select>
```
```css
.custom-select {
/* 自定义样式 */
}
```
通过以上方法，你可以根据自己的需求修改 `mat-select` 的样式，以使其在显示选项时符合你的设计要求。记得将上述 CSS 代码添加到你的项目的 CSS 文件或组件的样式表中。
