gpt4 book ai didi

javascript - Angular Material 的样式(css)与文档中的不一样

转载 作者:行者123 更新时间:2023-12-04 10:11:49 25 4
gpt4 key购买 nike

这件事让我开始烦躁,所以我是来寻求帮助的!
我已经开始使用 Material 开发 Angular 应用程序。
我想要与文档中的 Material 组件完全相同的样式。

让我解释一下我所做的步骤:

  • 创建 Angular 应用程序ng new my-dream-app
  • 添加 Material
  • ng add @angular/material

    ? Choose a prebuilt theme name, or "custom" for a custom theme: Pink/Blue Grey [ Preview: https://material.angular.io?theme=pink-bluegrey ]
    ? Set up global Angular Material typography styles? Yes
    ? Set up browser animations for Angular Material? Yes
  • 现在我尝试添加一个简单的表单,就像这里的表单:https://material.angular.io/components/form-field/overview
    所以里面app.module.ts我添加了所需的导入:
  • ...
    import { AppComponent } from './app.component';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

    @NgModule({
    declarations: [
    AppComponent
    ],
    imports: [
    ...
    MatInputModule,
    MatFormFieldModule
    ],
    providers: [],
    bootstrap: [AppComponent]
    })
    export class AppModule { }


    和内部 app.component.html我已经把组件:
    <form class="example-form">
    <mat-form-field class="example-full-width">
    <mat-label>Favorite food</mat-label>
    <input matInput placeholder="Ex. Pizza" value="Sushi">
    </mat-form-field>

    <mat-form-field class="example-full-width">
    <mat-label>Leave a comment</mat-label>
    <textarea matInput placeholder="Ex. It makes me feel..."></textarea>
    </mat-form-field>
    </form>

    与文档 中报告的完全相同

    现在,如果我尝试运行该应用程序,我有:

    enter image description here

    取而代之的是:

    enter image description here

    我添加了一个背景颜色来增加易读性,但我仍然注意到 插入文本的颜色与示例不同 .我的是黑色的,他们的是白色的。
    此外,聚焦元素的颜色是不同的(“最喜欢的食物”对我来说是 #c2185b 而对他们来说是 #e91e63 )。

    为什么示例和实际工作代码之间存在所有这些差异? (我选择了相同的主题“粉红色和蓝灰色”)
    我错过了什么?
    是否可以在不手动覆盖 CSS 的情况下与文档页面具有相同的样式?

    完整代码可在此处获得: https://github.com/gixlg/AngularGCCU

    最佳答案

    推出 npm install并在您的正文中添加类 <body class="mat-app-background"> ,或者如果您愿意,您可以尝试添加 import { MatSidenavModule } from "@angular/material/sidenav";在你的 app.module.ts
    并将您的 html 代码放入 <mat-sidenav-container>

    关于javascript - Angular Material 的样式(css)与文档中的不一样,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61302174/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com