Question

有谁知道如何更改Angular材质中的mat-spinner颜色？覆盖css不起作用。我尝试在材料文件中更改颜色，但它们只能导入，我无法更改任何内容。我希望它是我的自定义颜色，而不是来自prebiult-themes的颜色。

Answer 1

将此代码用于**＆lt; mat-spinner＆gt; **将此代码添加到 .css 文件

中

.mat-progress-spinner circle, .mat-spinner circle {
stroke: #3fb53f;
}

Answer 2

对于在Angular 4/6/7中寻求灵活解决方案的用户来说，此答案将是有用的。如果您不想在组件级别更改垫旋转器的颜色，则需要使用::ng-deep选择器。知道这一点，解决方案就很容易。

在您的html文件中：

    <div class="uploader-status">
        <mat-spinner></mat-spinner>
    </div>

在您的css / scss文件中：

    .uploader-status ::ng-deep .mat-progress-spinner circle, .mat-spinner circle {
        stroke: #000000;
    }

注意.uploader-status css类封装了该组件。您可以只使用::ng-deep而不使用类，但是您对垫子旋转器所做的任何更改都将出现在应用程序的其他区域。 Check this to learn more。

Answer 3

轻松修复！

在 styles.css 中而不是component.css文件中添加自定义CSS规则

.mat-progress-spinner circle, .mat-spinner circle {
    stroke: #2A79FF!important;
}

Answer 4

内置颜色。

主题可以使用color属性更改进度条的颜色。默认情况下，进度条使用主题的原色。可以将其更改为“重音”或“警告”。

https://material.angular.io/components/progress-spinner/overview

示例

<mat-spinner color="warn"></mat-spinner>

Answer 5

mat-spinner html代码：

Log.e("MainActivity","2nd one $lon $lat")

现在是sass代码：

<mat-spinner color="accent" diameter="20" class="loading"></mat-spinner>

Answer 6

该游戏已经发布，但是今天在我的.scss文件中效果很好...

.parent-element-class {
    ::ng-deep 
    .mat-progress-spinner,
    .mat-spinner {
        circle {
            stroke: white;
        }
    }
}

Answer 7

import UIKit

class LoginController: UIViewController {
    //defining labels for username and password
    let usernameLabel: UILabel = {
        let ULabel = UILabel()
        ULabel.text = NSLocalizedString("Username", comment: "")
        ULabel.textColor = .gray
        ULabel.textAlignment = .center
        ULabel.font = ULabel.font.withSize(25)
        return ULabel
    }()
    let passwordLabel: UILabel = {
        let PLabel = UILabel()
        PLabel.text = NSLocalizedString("Password", comment: "")
        PLabel.textColor = .gray
        PLabel.textAlignment = .center
        PLabel.font = PLabel.font.withSize(25)
        return PLabel
    }()

    //defining text fields for username and password
    let usernameTextField: UITextField = {
        let UTextFieldDesign = UITextField()
        UTextFieldDesign.setBottomBorder(backGroundColor: BackColor, borderColor: LoginButtonColor)
        UTextFieldDesign.textColor = .white
        UTextFieldDesign.layer.cornerRadius = 3.0
        //UTextFieldDesign.placeholder = "  Username"
        UTextFieldDesign.textColor = .white
        //UTextFieldDesign.backgroundColor = .lightGray
        return UTextFieldDesign
    }()
    let passwordTextField: UITextField = {
        let PTextFieldDesign = UITextField()

        PTextFieldDesign.setBottomBorder(backGroundColor: BackColor, borderColor: LoginButtonColor)
        PTextFieldDesign.textColor = .white
        PTextFieldDesign.isSecureTextEntry = true
        PTextFieldDesign.layer.cornerRadius = 3.0
        //PTextFieldDesign.backgroundColor = .lightGray
        return PTextFieldDesign
    }()

    //designing login button for login screen
    let loginButton: UIButton = {
        let LButton = UIButton(type: .system)
        LButton.layer.cornerRadius = 25.0
        LButton.setTitleColor(.white, for: .normal)
        LButton.setTitle(NSLocalizedString("Sign In", comment: ""), for: .normal)
        LButton.titleLabel?.font = .systemFont(ofSize: 20)
        LButton.backgroundColor = LoginButtonColor
        LButton.addTarget(self, action: #selector(loginAction), for: .touchUpInside)
        return LButton
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        self.hideKeyboardWhenTap()
        navigationController?.isNavigationBarHidden = true
        navigationController?.isToolbarHidden = true
        view.backgroundColor = UIColor(red: 203/255, green: 215/255, blue: 242/255, alpha: 1.0)
        setupTextFieldComponents()
        setupLoginButton()
    }
    override func viewWillAppear(_ animated: Bool) {
        navigationController?.isNavigationBarHidden = true
        navigationController?.isToolbarHidden = true
        super.viewWillAppear(animated)
    }


    @objc func loginAction() {
        let selectioncontroller = SelectionController()
        navigationController?.pushViewController(selectioncontroller, animated: true)
    }

    fileprivate func setupTextFieldComponents() {
        setupUsernameText()
        setupUsernameField()
        setupPasswordText()
        setupPasswordField()
    }
    fileprivate func setupUsernameText() {

        view.addSubview(usernameLabel)
        usernameLabel.translatesAutoresizingMaskIntoConstraints = false
        usernameLabel.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20).isActive = true
        usernameLabel.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 20).isActive = true
        usernameLabel.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -20).isActive = true


    }
    fileprivate func setupPasswordText() {
        view.addSubview(passwordLabel)
        passwordLabel.translatesAutoresizingMaskIntoConstraints = false
        passwordLabel.topAnchor.constraint(equalTo: usernameTextField.bottomAnchor, constant: 15).isActive = true
        passwordLabel.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 20).isActive = true
        passwordLabel.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -20).isActive = true


    }
    fileprivate func setupLoginButton() {
        view.addSubview(loginButton)
        loginButton.anchors(top: passwordTextField.bottomAnchor, topPad: 15, bottom: nil, bottomPad: 0,
                            left: passwordTextField.leftAnchor, leftPad: 0, right: passwordTextField.rightAnchor,
                            rightPad: 0, height: 50, width: 0)
        loginButton.translatesAutoresizingMaskIntoConstraints = false
    }


    fileprivate func setupUsernameField() {
        view.addSubview(usernameTextField)
        usernameTextField.anchors(top: usernameLabel.bottomAnchor, topPad: 12, bottom: nil, bottomPad: 0,
                                  left: view.leftAnchor, leftPad: 24, right: view.rightAnchor,
                                  rightPad: 24, height: 30, width: 0)
        usernameTextField.translatesAutoresizingMaskIntoConstraints = false
    }
    fileprivate func setupPasswordField() {
        view.addSubview(passwordTextField)
        passwordTextField.anchors(top: passwordLabel.bottomAnchor, topPad: 12, bottom: nil, bottomPad: 0,
                                  left: view.leftAnchor, leftPad: 24, right: view.rightAnchor,
                                  rightPad: 24, height: 30, width: 0)
        passwordTextField.translatesAutoresizingMaskIntoConstraints = false
    }

}

在这里，:: ng-deep将用于强制样式。

！这里重要的是说“这很重要”，您将忽略所有其他规则并应用此规则。

Answer 8

我认为这里的关键是必须在GLOBAL styles.css文件中。如果放置在下面，则可以解决以下问题（如果使用ng add添加材料，则将CSS文件添加到项目中时受影响的CSS文件：

.mat-progress-spinner circle, .mat-spinner circle {
    stroke: #b68200;
}

当然，如果您想要样式独特的微调框，也可以将类添加到组件并指定不同的选择器。但是，这些类似乎必须在全局CSS文件中。

Answer 9

默认情况下，角材料会给你的微调器默认主颜色。您可以使用托盘中可用的 3 种颜色，分别是主色、强调色、警告色。但是，如果您的需求与颜色不同，请考虑以下任一选项。

简单的方法（不推荐）您可以使用任何方法来强制覆盖其他答案中提到的 css。如果您不希望微调器在整个应用程序中具有相同的颜色，我建议在微调器元素上方使用父类。
正确和推荐的方法是我们为材料使用自定义主题。如果您已经有自定义，则可以喜欢创建一个名为
的自定义mixin
//此处 $primary-color 是您希望微调器的颜色 @mixin spinner-custom-theme($primary-color, $accent-color, $warn-color) { $custom-spinner-theme-primary: mat-palette($primary-color); $custom-spinner-theme-accent: mat-palette($accent-color, A200, A100, A400); $custom-spinner-theme-warn: mat-palette($warn-color);

$custom-spinner-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);

@include mat-progress-spinner-theme($custom-spinner-theme); }

现在转到@include angular-material-theme($custom-theme); 写了和@include 你的mixin就在@include angular-material-theme($custom-theme);

要了解有关如何创建自定义主题的更多信息，您可以查看此博客 here

Answer 10

最好通过自定义主题来实现。

https://material.angular.io/guide/theming

Answer 11

使用此代码

<md-progress-circular md-diameter="20px"></md-progress-circular>

md-progress-circular path {
  stroke: purple;
}

Answer 12

在.css / .scss组件文件样式中添加（它将在本地运行-仅在组件中）

:host ::ng-deep .mat-progress-spinner circle, .mat-spinner circle {   
    stroke: #bada55;
}

Answer 13

样本颜色，笔触宽度，直径和标题

<mat-spinner strokeWidth="24" [diameter]="85" color="warn" title="Tooltip text here"></mat-spinner>

Answer 14

如果您不想弄乱全局css，并且需要一种在应用程序的不同区域中将微调器设置为不同颜色的方法，则强烈建议为其创建指令。

<mat-spinner diameter="22" customSpinner color="#fff"></mat-spinner>

然后微调器应该像这样工作：

/usr/lib/python2/dist-packages/sphinxcontrib/httpdomain.py

Answer 15

在您的styles.css文件中，添加...

::ng-deep .mat-progress-spinner circle, .mat-spinner circle {
    stroke: #2A79FF!important;
}

您可能已经猜到了，我对Nitin Wahale's答案做了一个简单的修改。我在他的答案前加上了::ng-deep，因为我遇到了同样的问题，因此在我的情况下有效。

我希望这对某人有帮助

Answer 16

如果您要自定义网页上的每个微调框。您可以这样操作：

<mat-spinner class="custom-spinner-color"></mat-spinner>

现在在mat-spinner上添加类：

.withdraw-deposit-modal-spinner{
  stroke: #234188;
}

在css文件中：

pandas

这就是我想要实现的目标。我想如果您要寻找这个问题，您可能会希望同样的答案。

Angular Material mat-spinner自定义颜色

16 个答案: