How to apply CSS classes to another component in AngularDart?

You could achieve this by splitting your components code into separate files - or separate CSS file in your case.

Instead of writing the style straight in the component's - styles, you would import the CSS file by using the styleUrls. That way you can pass a file(s) with your styles, and the file can be shared amongst multiple components.

@Component(
      styleUrls: ['./hero1.css', './folder/hero2.css'],
)

Bear in mind that the URLs in styleUrls are relative to the component.

Another benefit of importing the css with styleUrls is that it also grants you the ability to use imports within that file.

hero1.css

@import './folder/hero2.css';

FYI: It's a common practice to split your components code into separate files.

• hero.dart
• hero.css
• hero.html

And then in your dart file reference them as:

@Component(
      templateUrl: './hero.html',
      styleUrls: ['./hero.css'],
)

Please refer to AngularDart - Component Styles for brief information about this.