Question

我已经创建了一个＆＃34; custom＆＃34;主题，（使用https://material.angular.io/guide/theming的主题文档，这非常糟糕），如下所示：

@import '~@angular/material/theming';
@include mat-core();

$ip-primary: mat-palette($mat-indigo);
$ip-accent: mat-palette($mat-pink, A200, A100, A400);
$ip-theme: mat-light-theme($ip-primary, $ip-accent);
$ip-theme-dark: mat-dark-theme($ip-primary, $ip-accent);

.indigo-pink {
  @include angular-material-theme($ip-theme);
}

.indigo-pink-dark {
  @include angular-material-theme($ip-theme-dark);
}

我的index.html包含：

<body class="mat-app-background mat-typography">
  <app-root></app-root>
</body>

在app-root组件的容器中，我使用以下命令在我的自定义类名（indigo-pink和indigo-pink-dark）之间切换：

<div [ngClass]="appTheme">

我还使用以下方法将CDK覆盖容器类设置为我的自定义类名：

setContainerClass(className: string): void {
  const containerClassToKeep = 'cdk-overlay-container';
  const overlayClassList = this.overlayContainer.getContainerElement().classList;
  const existingClasses = Array.from(overlayClassList);

  existingClasses.forEach(classToken => {
    if (classToken !== containerClassToKeep) {
      overlayClassList.remove(classToken);
    }
  });

  overlayClassList.add(className);
}

主要问题是当我切换到黑暗主题时，我确实看到indigo-pink-dark类名正确添加到我的app组件容器中，但只有一些样式发生了变化（例如顶部的工具栏变黑了和材料组件） - 页面的主体保持白色。主题指南（和其他博客文章）说使用mat-app-background应该解决这个确切的问题。

此外，如果我尝试手动更新身体的背景颜色，请使用例如

.indigo-pink-dark {
  @include angular-material-theme($ip-theme-dark);

  body & {
    background-color: #000;
  }
}

然后这＆＃34;背景色＆＃34;只覆盖整个页面，您无法在页面上看到任何元素。这与CDK叠加有关，因为如果我删除了将类名添加到叠加层的部分，它有用 - 页面的背景设置正确，但随后叠加没有正确的造型。

Answer 1

我遇到了同样的问题，发现了this solution on the Angular Material GitHub issue#3298 (post by JamieStill)。

我将所有app.component.html内容包装在div中

<div class="mat-typography app-frame mat-app-background">
    <app-header></app-header>
    <main>
        <app-post-create></app-post-create>
        <app-post-list></app-post-list>
    </main>
</div>

在app.component.css中

html, body, app-root, .app-frame {
    overflow: hidden;
    margin: 0;
    height: 100%;
    box-sizing: border-box;
    color: #e0e0e0;
}

我仅在Angular 6的实践应用中对此进行了测试，但我怀疑它也将在Angular 5中运行。

之前：

Before

之后：

After

Answer 2

如果您在项目开始后添加角度材质，您只需手动将 mat-app-background 类添加到 index 中的 body 元素.html 如下：

<body class="mat-typography mat-app-background">
...
</body>

Answer 3

app.component.html 中只有 vh-100 mat-app-background

<div class="vh-100 mat-app-background">
  <router-outlet></router-outlet>
</div>

Answer 4

我不确定你为什么要操纵CDK覆盖容器。这似乎没必要。只需将主题类绑定到应用程序根组件//Imports import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.*; import javax.swing.JButton; import javax.swing.JLabel; import javax.swing.JOptionPane; import javax.swing.JFrame; import javax.swing.JPanel; import javax.swing.JTextField; public class SpeedingTicketGUI { private JLabel lblInfo; private JLabel lblWelcomeText; private JLabel lblEnterName; private JLabel lblEnterSpeedLimit; private JLabel lblEnterYourSpeed; private JLabel lblResultOfCalculate; private JLabel lblFinalResult; private JButton btnCalculate; private JButton btnClose; private JTextField txtEnterName; private JTextField txtEnterSpeedLimit; private JTextField txtEnterUsersSpeed; private JPanel panel; private JFrame frame; private SpeedingTicketClass speedTicket=new SpeedingTicketClass(); Font f=new Font("Helvetica", Font.BOLD, 80); Font r=new Font ("Helvetica", Font.BOLD, 100); public SpeedingTicketGUI(){ createForm(); createButtons(); createLabels(); createInputFields(); frame.add(panel); frame.setVisible(true); } public void createForm() { frame=new JFrame(); frame.setSize(800,600); frame.setTitle("Speeding Ticket"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setVisible(true); panel=new JPanel(); panel.setBackground(Color.WHITE); panel.setLayout(null); } public void createButtons() { btnCalculate= new JButton("Calculate"); btnCalculate.setBounds(158,307,114,27); btnCalculate.addActionListener(new CalculateHandler()); panel.add(btnCalculate); btnClose= new JButton ("Close"); btnClose.setBounds(319, 307, 114, 27); btnClose.addActionListener(new ExitHandler()); panel.add(btnClose); } public void createInputFields() { txtEnterName=new JTextField(); txtEnterName.setBounds(158, 72, 145, 27); txtEnterName.addActionListener(new UsersInfoHandler()); panel.add(txtEnterName); txtEnterSpeedLimit=new JTextField(); txtEnterSpeedLimit.setBounds(158, 109, 145, 27); txtEnterSpeedLimit.addActionListener(new SpeedLimitHandler()); panel.add(txtEnterSpeedLimit); txtEnterUsersSpeed=new JTextField(); txtEnterUsersSpeed.setBounds(158, 139, 145, 27); txtEnterSpeedLimit.addActionListener(new UsersSpeedHandler()); panel.add(txtEnterUsersSpeed); } public void createLabels() { lblWelcomeText=new JLabel ("Welcome!"); lblWelcomeText.setBounds(211, 16, 169, 21); panel.add(lblWelcomeText); lblInfo=new JLabel ("Check what fine you are required to settle here."); lblInfo.setBounds(158,37,275,38); panel.add(lblInfo); lblEnterName=new JLabel ("Enter your name:"); lblEnterName.setBounds(40, 75, 102, 21); panel.add(lblEnterName); lblEnterSpeedLimit=new JLabel ("Enter the speed limit:"); lblEnterSpeedLimit.setBounds(28, 112, 126, 21); panel.add(lblEnterSpeedLimit); lblEnterYourSpeed=new JLabel ("Enter your speed:"); lblEnterYourSpeed.setBounds(38, 142, 106, 21); panel.add(lblEnterYourSpeed); lblResultOfCalculate=new JLabel ("Result:"); lblResultOfCalculate.setBounds(60, 201, 63, 21); panel.add(lblResultOfCalculate); lblFinalResult=new JLabel("-Penalty will appear here-"); lblFinalResult.setBounds(158, 201, 145, 21); panel.add(lblFinalResult); } //Action Listener to calculate the users speed class CalculateHandler implements ActionListener{ @Override public void actionPerformed (ActionEvent arg0) { speedTicket.calculateSpeed(); lblFinalResult.setText(String.valueOf(speedTicket.calculateSpeed())); } } class SpeedLimitHandler implements ActionListener{ @Override public void actionPerformed (ActionEvent arg0) { speedTicket.getSpeedLimit(); } } /* UserInfoHandler used to obtain the users name so the information can be written to a file for viewing at a later date. */ class UsersInfoHandler implements ActionListener{ @Override public void actionPerformed (ActionEvent arg0) { speedTicket.getUsersInformation(); } } //UserSpeedHandler used to obtain the speed that the user enters into the TextArea. class UsersSpeedHandler implements ActionListener{ @Override public void actionPerformed (ActionEvent arg0) { speedTicket.getUsersSpeed(); } } //ExitHandler used to control what happens when a user presses the 'Close' button. class ExitHandler implements ActionListener{ @Override public void actionPerformed(ActionEvent arg0) { int n=JOptionPane.showConfirmDialog(frame, "Are you sure you want to exit?", null, JOptionPane.YES_NO_OPTION); if (n==JOptionPane.YES_OPTION) { System.exit(0); } } } public static void main (String[] args) { new SpeedingTicketGUI(); } }即可。请参阅https://stackblitz.com/edit/angular-ndmju6。

Answer 5

游戏后期，但尝试将高度设置为100％。这就是为我解决的问题。黑暗主题是一个全局类，其中包含我的Angular Material黑暗主题。我将此HTML放入app.component.html。

<div class="mat-app-background dark-theme" style="height: 100%;">
  <app-root></app-root>
</div>

这是使用Angular 9。

角度材质5黑暗主题未应用于身体

5 个答案: