更改AngularDart组件颜色

时间:2017-07-23 18:41:32

标签: html css dart angular-dart

我试图通过CSS更改tab-button元素颜色,经过检查我发现它有类tab-button,所以在CSS中我做了:

.tab-button {
  color: lightcoral;
}

但似乎没有任何改变。

我可能完全错误地咆哮,因为我的CSS体验完全是零,但我感到茫然

编辑: app_component.html

<!DOCTYPE html>
<html>
    <link href="app_component.css" rel="stylesheet">
    <body>
        <h1 id="introHeading">
            Hello Angular!
    </h1>
    <material-tab-panel id="tabPanel">
        <material-tab label="One" id="tabOne">
            Tab One
        </material-tab>
        <material-tab label="Two">
            Tab Two
        </material-tab>
    </material-tab-panel>
    <material-checkbox class="checkboxClass" themeColor="#F08080" id="testCheckbox" label="Test" (handleClick)="checkChecked()"></material-checkbox>
    <material-button label="Click me!" id="buttonToClick"></material-button>
</body>

app_component.dart

import 'package:angular2/angular2.dart';
import 'package:angular_components/angular_components.dart';

@Component(
  selector: 'my-app',
  styleUrls: const ['app_component.css'],
  templateUrl: 'app_component.html',
  directives: const [materialDirectives, MaterialCheckboxComponent],
  providers: const [materialProviders],
)

class AppComponent implements OnInit {
  @override
  ngOnInit() {
  }
}

1 个答案:

答案 0 :(得分:0)

我无法看到您在HTML页面中包含标签按钮类的位置。是否有另一个html页面对应于您所指的类?为了使该类生效,您需要在开始标记中包含class =“tab-button”。

如果您发现这仍然无效,可能会有另一个类覆盖您尝试使用的颜色。您可以添加重要标记以使您的颜色优先。

.tab-button {
    color: lightcoral !important;
}