css - 更改 Angular 2 组件的 CSS

Question

我是 Web 开发的新手，想在我的 Angular 2 应用程序中使用 ng2-tag-input 和 Clarity UI 框架。

由于 Clarity UI 中的 CSS 样式生效，标签输入组件无法正确呈现。例如，这里有两个屏幕截图：

在 .form-group 之外呈现的标记输入组件

在 .form-group 中呈现的标记输入组件

内部<div class="form-group">删除按钮 (x) 未对齐。在这两种情况下，添加标签输入字段都未对齐，等等。

我应该如何修复样式？我正在寻找解决此问题的一般策略以及特定修复程序。

Answer 1

如果您想在 ng2-tag-input 中使用自定义主题样式，请查看此链接ng2-tag-input theme

把这个foundation-theme.scss文件放在你的组件级别..并在你的组件中提供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);
}