Recipe:

Adding CSS classes to your components


Problem

You want to add CSS class names to your Ember Components.

Solution

Set additional class names with the classNames property of subclassed components:

app/components/awesome-input.js

export default Ember.Component.extend({
  classNames: ['css-framework-fancy-class']  
});
{{awesome-input}}
<div class="css-framework-fancy-class"></div>

Discussion

If desired, you can apply multiple class names.

classNames: ['bold', 'italic', 'blue']