Adding CSS Classes to Your Components Edit Page

Problem

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

Solution

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

1
2
3

App.AwesomeInputComponent = Ember.Component.extend({
  classNames: ['css-framework-fancy-class']  
})

1

{{awesome-input}}

1

<div class="css-framework-fancy-class"></div>

Discussion

If desired, you can apply multiple class names.

1

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

Example

JS Bin

See Customizing a Component's Element for further examples.