[英]Change CSS for Angular 2 Component
我是Web開發的新手,想在Angular 2應用程序中與larity UI Framework一起使用ng2-tag-input。
由於有效的Clarity UI中的CSS樣式,標簽輸入組件無法正確呈現。 例如,這是兩個屏幕截圖:
在<div class="form-group">
,刪除按鈕(x)未對齊。 在這兩種情況下,添加標簽輸入字段均未對齊等。
我應該如何修復樣式? 我正在尋找解決此問題的一般策略,也正在尋求特定的解決方案。
如果要在ng2-tag-input中使用自定義主題樣式,請參閱此鏈接ng2-tag-input主題
將這個foundation-theme.scss文件放在您的組件級別中。並在您的組件stylesUrls:['./foundation-theme.scss']
給該scss路徑,並根據需要更改基礎主題中的樣式。
基礎主題
@import "../../../../../node_modules/ng2-tag-input/dist/modules/core/styles/core/_core.scss";
$foundation-primary: #00a6e8;
$foundation-primary-dark: darken($foundation-primary, 10%);
// this is the container's theme
$foundation-theme: (
container-border-bottom: 1px solid $foundation-primary
);
// this is the tag's theme
$foundation-tag-theme: (
background: $foundation-primary,
background-focused: $foundation-primary-dark,
background-active: $foundation-primary-dark,
background-hover: $foundation-primary-dark,
color: #fff,
color-hover: #fff,
border-radius: 2px
);
// this is the delete icon's theme
$foundation-icon-theme: (
fill: #fff,
fill-focus: #eee,
transition: all 0.35s
);
// apply theme to the container
/deep/ .ng2-tag-input.foundation-theme {
@include tag-input-theme($foundation-theme);
}
// apply theme to the tags
/deep/ .ng2-tag-input.foundation-theme tag {
@include tag-theme($foundation-tag-theme);
}
// apply theme to the delete icon
/deep/ .ng2-tag-input.foundation-theme tag delete-icon {
@include icon-theme($foundation-icon-theme);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.