通過 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 文件會很好，但我猜現在必須這樣做。