为 Angular 2 应用程序实现可插件 CSS 主题的最佳方式是什么? 推荐的文件结构是什么?目前我正在使用由 angular-cli 生成的那个。
最佳答案
我们有几种方法可以为组件添加样式:
- 在模板 HTML 中内联
- 通过设置样式或 styleUrls 元数据
- 使用 CSS 导入
内联样式:
@Component({
templateUrl: 'test.html',
styles: [`
.card {
height: 20px;
width: 80px;
}
`],
})
使用外部样式表:
@Component({
styleUrls: ['css/mystyle.css'],
templateUrl: 'test.html',
})
CSS 导入:
@import 'hero-details-box.css';
组件样式也有来自 shadow DOM 样式范围的特殊选择器。例如可能有一个应用于文档的 CSS 主题类:
:host-context(.theme-light) h2 {
background-color: #eef;
}
作为一种常见的做法,将组件的代码、HTML 和 CSS 拆分为同一目录中的三个独立文件:
quest-summary.component.ts
quest-summary.component.html
quest-summary.component.css
请访问Component styles了解更多。
如果您想进一步增强它并使用 SAS,请访问 ANGULAR2 SASS了解更多详情。
styleUrls: ['./sassexample.component.scss']
如果您想为 UI 组件使用库,请查看以下内容:
希望这对您有所帮助。
干杯!!
关于Angular 2 中的 CSS 主题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40612525/