Class inheritance on components

Design
1

Apologies in advance for the n00b nature of this question; I’m completely new to EmberJS.

When using a component, the CSS class references don’t seem to behave in the way I’d expect.

For example, let’s say I’ve got a route for ‘signUp’ and a route for ‘placeOrder’ and both pages have a form element but I’d like to style them in CSS differently. If I place a div on the route with a class name equivalent to the route name, I should be able to do something like this:

.signUp form {border: 1px solid blue} .placeOrder form {border: 1px solid red}

However, when using a component - for a modal, for example - the only classes which I seem to be able to address are those that are within the component itself.

I’ve put up a JS Bin to demonstrate. If you look at the example’s CSS: .homeScreen .roundbox fails… but if you remove the .homeScreen, and just reference .roundbox, it works.

Is this limitation something that happens with all EmberJS components? If we want to style EmberJS components slightly differently depending on which route is accessing them, can we not do something along this pattern: .routeClassName .componentDetail ?

What would be the preferred approach in EmberJS?

2

I’m confused about your question, but looking at your example, it makes sense that the .homeScreen .roundbox styling doesn’t apply, because you’re rendering the modal into the {{outlet modal}}, which is outside the element with class homeScreen.

If you want to customise the class name of the model, can’t you just pass it in as a parameter when you create the modal?