Ember Octane is here! A lot has changed since Ember 3.14, including these Guides. Read more in the Ember Blog.

Old Guides - You are viewing the guides for Ember v1.10.0. VIEW v3.15.0
Edit Page

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.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.