angular.json配置的styles文件插入到了body中

在 Angular CLI 中，可以在 `angular.json` 文件中配置应用程序的构建选项，其中包括样式表的配置。默认情况下，CLI 会将样式表添加到 `head` 标签中，但是我们可以通过 `styles` 数组的 `inject` 属性来控制样式表的注入方式。

如果设置 `inject` 为 `true`，则样式表将被注入到 `head` 标签中。如果设置 `inject` 为 `false`，则样式表将被注入到 `body` 标签中。

例如，以下是将样式表注入到 `body` 标签中的 `angular.json` 配置示例：

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              {
                "input": "src/styles.css",
                "inject": false
              }
            ]
          }
        }
      }
    }
  }
}

需要注意的是，将样式表注入到 `body` 标签中可能会导致性能问题，因为它会阻塞页面的渲染。因此，建议只在必要时使用这种注入方式。

相关问题

angular material 对话框样式设置，现在默认是圆角背景，怎么修改成想要的样式

Angular Material 的对话框（也称为 Modal 或 Popover）提供了丰富的样式选项，可以自定义其外观。如果你想要改变默认的圆形背景，你可以通过以下几个步骤来定制 Angular Material Dialog 的样式：

1. **引入主题（Theme）**：首先，在你的 `styles.css` 文件或 `angular.json` 的全局样式配置中，导入 Angular Material 主题，如 `@angular/material/core/theming/prebuilt/indigo-pink.css`。

// styles.css 或 angular.json
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

2. **创建自定义主题**：如果你想创建自定义的主题，可以在 `src/styles.scss` 或 `src/theme.scss` 中添加自定义变量。例如，你可以修改 `mat-dialog-container` 类的背景颜色和边框样式。

$primary: mat-palette(indigo, 500);
$accent: mat-palette(pink, A400);

// 修改对话框背景颜色和边框
$dialog-background-color: #ffffff;
$dialog-border-radius: 0; // 可以将 border-radius 设置为 0 来去掉圆角

// 创建并应用自定义主题
@use '@angular/material/core' as core;

@include core/theming([
  $body-bg: $dialog-background-color,
  $dialog-outline-color: mat-color($accent, A700),
  $dialog-host-backdrop-color: rgba(0, 0, 0, 0.5),
  $mat-dialog-container: {
    background-color: mat-color($dialog-background-color),
    border-radius: $dialog-border-radius,
    // 其他你需要的样式属性
  },
]);

3. **应用主题**：在 `app.module.ts` 中注册你的自定义主题。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// ...

@NgModule({
  imports: [
    // ...
    MatDialogModule,
    MatCoreModule,
    // 如果你使用了自定义主题，记得导入它
    ThemeModule.forRoot(),
  ],
  // ...
})
export class AppModule {}

完成上述步骤后，你应该能看到对话框背景和圆角已经被更改为你自定义的样式。如果需要进一步的帮助，可以根据 Angular Material 的官方文档查阅详细信息：https://material.angular.io/components/dialog/api