Overriding "view" level properties in Ember 2.x core components

I've come across an issue that i'm sure developers must have encountered before when using Ember 2.x and trying to do full-page divs.

In the old days of Ember, you could override view properties such as class by using the following syntax:

var ApplicationView = Ember.View.extend({
    classNames: ['container'],
    ...
});

module.exports = ApplicationView;

In Ember 2.x, the concept of Views is now deprecated, but the concept of components requires that you use a - in your component name, which obviously doesn't work for overriding either your application or index core views.

The way that i'm fixing this is retaining my views/application.js structure in my application, but changing to:

import 'Ember' from ember;

export default Ember.Component.extend({
    classNames: ['container'],
});

This works, but it just feels...dirty? Has anyone come across, or know of, a more "official" way of doing this, because I can't be the only person who's trying to make a full page div in Ember 2.x and thus needing to apply css to the application-level div.