Angular 2 Bulma 变量不适用于 ngClass 属性 [关闭]答案

【问题标题】：Angular 2 Bulma variables doesn't work with ngClass attribute [closed]Angular 2 Bulma 变量不适用于 ngClass 属性 [关闭]
【发布时间】：2021-02-13 06:41:56
【问题描述】：

编译我的代码时，变量($tooltip-background-color, $tooltip-color) 不会改变。值保持默认。

HTML 代码：

<div class="has-tooltip-multiline has-tooltip-top"
     [ngClass]="{'dark-theme': darkTheme === true, 'light-theme': darkTheme !== true}"
     [attr.data-tooltip]="tooltipText">
  {{Title}}
</div>

SCSS 代码：

.dark-theme{
  $tooltip-background-color: #363636;
  $tooltip-color: #fff;
}

.light-theme{
  $tooltip-background-color: #ECEFF0;
  $tooltip-color: #333333;
}

@import '~bulma/bulma';
@import '~bulma-tooltip/src/sass';

Component.ts 文件：

@Component({
  selector: 'box-component',
  templateUrl: './box.component.html',
  styleUrls: ['./box.component.scss'],
  encapsulation: ViewEncapsulation.ShadowDom,
})
export class TextBoxComponent implements OnInit {

  @Input('darkTheme') darkTheme: boolean;
  @Input('Title') Title: string;
  @Input('tooltipText') tooltipText: string;


  constructor() {
  }

  ngOnInit() {
  }
}

Angular.json 文件

"styles": [
              "node_modules/bulma/css/bulma.min.css",
              "node_modules/bulma-switch/dist/css/bulma-switch.min.css",
              "node_modules/bulma-tooltip/dist/css/bulma-tooltip.min.css",
              "src/styles.scss"
            ]

Angular 版本是 8.2.14

【问题讨论】：

能否添加包含主题逻辑的代码。
@jburtondev 是的
谢谢，当您将 darkTheme 的布尔值硬编码为 true 时会发生什么？
另外声明补码的模块中是否有通用模块？
我现在试试

标签： html css angular sass bulma

【解决方案1】：

.light-theme {
  --tooltip-background-color: 236, 239, 240;
  --tooltip-color: 51, 51, 51;
}

.dark-theme{
  --tooltip-background-color: 54, 54, 54;
  --tooltip-color: 255, 255, 255;
}


$tooltip-background-opacity: 1;
$tooltip-background-color: var(--tooltip-background-color);
$tooltip-color: var(--tooltip-color);


@import '~bulma/bulma';
@import '~bulma-tooltip/src/sass';

【讨论】：