Change CSS for Angular 2 Component

Question

I'm new to web development and want to use ng2-tag-input in my Angular 2 app together with Clarity UI Framework.

The tag input component doesn't render correctly because of CSS styles from Clarity UI that are in effect. For example, here are two screenshots:

Tag input component rendered outside of .form-group

Tag input component rendered inside of .form-group

Inside the <div class="form-group"> the delete buttons (x) are misaligned. In both cases the add tag input field is misaligned, etc.

How should I go about fixing the styles? I'm looking just as much for a general strategy to approaching this issue as for a specific fix.

You should have a read of : https://angular.io/guide/component-styles . Key idea is that you can define overwrite styles of components using the /deep/ selector. Component's styles should not be affected styles defined elsewhere though. Can you give more input on that ? — Alexis Facques, Jun 30 '17 at 10:24

score 1 · Answer 1 · answered Jun 30 '17 at 11:11

If you want to use custom themes styles in ng2-tag-input just see this link ng2-tag-input theme

put this foundation-theme.scss file in your component level..and give that scss paths in your component stylesUrls:['./foundation-theme.scss'] and change styles in foundation theme whatever you want.

foundation-theme.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);
}

Thanks, this works for me but I don't know yet how to go about fixing the problems mentioned in the question. — J Kurz, Jun 30 '17 at 12:02
I don't know about Clarity UI Framework. but you can change the delete icon position with ` $foundation-icon-theme: ` css. try it ! — Sathish Kotha, Jun 30 '17 at 12:57

Change CSS for Angular 2 Component

1 Answers1