Custom CSS style collection in Angular-CodePudding

I am building a component library for my company, and want my components to be easily stylable by providing an input property similar to this:

interface ComponentCSS {
 root: { [klass: string]: any };
 icon: { [klass: string]: any };
}

@Input()
styles: ComponentCSS;

But I am yet to find out how to use it the HTML code to style my component. I have tried this:

<app-component styles="{root:{'background': 'crimson'}}"></app-component>

But it complains that styles "cannot be a string"... but that is how you are supposed to write these things, right?

Is there a built-in way of doing this more properly?

CodePudding user response：

Here is how it turned out if someone needs a similar solution:

In component file:

interface ComponentCSS {
  root: { [Klass: string]: any };
}

@Input()
css_styles: ComponentCSS;

In component HTML:

<div
  
  [ngStyle]="css_styles.root"
  ...></div>

Setting the custom CSS:

<app-component
  [css_styles]="{root:{ 'background': 'red' }}">
</app-component>

CodePudding user response：

I think the problem is that styles is a reserved keyword for inline HTML styles. I would try to use another name for the Input property.