通过 class 的文本样式设置不适用于 ProgressBar.js

Question

我试图使用 Angular 在 Ionic 5 上创建 Promodo Timer 应用程序。 我正在使用 ProgressBar.js 作为计时器周围的进度条。 根据 progressbar.js 文档，他们指定了如何设置文本元素样式，如下所示 -

/ Text options. Text element is a <p> element appended to container
    // You can add CSS rules for the text element with the className
    // NOTE: When text is set, 'position: relative' will be set to the
    // container for centering. You can also prevent all default inline
    // styles with 'text.style: null'
    // Default: null
    text: {
        // Initial value for text.
        // Default: null
        value: 'Text',

        // Class name for text element.
        // Default: 'progressbar-text'
        className: 'progressbar__label',

        // Inline CSS styles for the text element.
        // If you want to modify all CSS your self, set null to disable
        // all default styles.
        // If the style option contains values, container is automatically
        // set to position: relative. You can disable behavior this with
        // autoStyleContainer: false
        // If you specify anything in this object, none of the default styles
        // apply
        // Default: object speficied below
        style: {
            // Text color.
            // Default: same as stroke color (options.color)
            color: '#f00',
            position: 'absolute',
            left: '50%',
            top: '50%',
            padding: 0,
            margin: 0,
            // You can specify styles which will be browser prefixed
            transform: {
                prefix: true,
                value: 'translate(-50%, -50%)'
            }
        },

        // Only effective if the text.style is not null
        // By default position: relative is applied to container if text
        // is set. Setting this to false disables that feature.
        autoStyleContainer: true,

        // Only effective if the shape is SemiCircle.
        // If true, baseline for text is aligned with bottom of
        // the SVG canvas. If false, bottom line of SVG canvas
        // is in the center of text.
        // Default: true
        alignToBottom: true
    },

我可以通过上面的文本 object 应用样式，但我试图通过我的 scss 文件使用默认的 className - progressbar-text添加样式。 这没有用。 我也尝试了自定义类名，但这也不起作用。

我的代码如下 -

import { Component, OnInit } from '@angular/core';
declare var ProgressBar: any;

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {

  constructor() { }

  ngOnInit() {
    this.initBar();
  }

  initBar() {
    let progressBar = new ProgressBar.Circle('.timer', {
      strokeWidth: 2,
      text: {
        value: '25:00',
        style: null,
        className: 'progressbar__label'
      },
      color: '#f4f4f4',
      trailWidth: 0.5,
      trailColor: '#010770'
    })
  }

}

我的scss -

.progressbar__label{
  // Text color.
  // Default: same as stroke color (options.color)
  color: #f00;
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 0;
  margin: 0;
  // You can specify styles which will be browser prefixed
  transform: {
    prefix: true;
    value: translate(-50%, -50%);
  }
}

计算元素-

<div class="progressbar__label">25:00</div>

任何帮助，将不胜感激。

阅读 ProgressBar.js文档。

Answer 1

我有同样的问题。 我注意到 class 设置在组件上，但它没有收到任何样式。 我试过在所有东西上使用!important ，但这也不起作用。

作为一种解决方法，现在，我正在设置style而不是className

text: {
  style: {
    ...all the styling in your class
  }
}

我知道这并不理想，能够将样式放入 scss 文件会很好，但我猜现在必须这样做。