ContributorsLast modified on: Mar 25, 2016

Edit this page on Github

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.AwesomeInputComponent = 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']

Example

JS Bin

See Customizing a Component’s Element for further examples.