How to apply CSS class to component?

Question

Why I can't apply my CSS Class to hello?

{name: "hello", content: "Hello From Enyo",className:"myClass",ontap: "helloTap"},

Answer 1

Enyo 2.0 changed the way you specify classes for your components. You should no longer specify styles or classes in your kind definitions. If you need to do so you can use 'classes' instead of 'className'.

The recommended way is to call addClasses (was addClass in Enyo 1.0) inside your create function. To add styles directly, call addStyles.

Answer 2

You can still "cheat" with the old style, just use classes instead of className

Answer 3

From the documentation I've read you seem to be doing it correctly.

http://enyowiki.com/ (scroll to the bottom)

developer.Palm

I've tried the same thing and I can't get it to work using an external style sheet. You can always do the style in enyo with the style keyword.

style:"background-color:blue;height: 50px; width: 30px;"

But this definitely is not good if you want to have multiple objects with the same style. Good question, hopefully someone will find an answer.

........................................

While writing this I tried testing out some other options. I used the .addClass("css-class") function after creating a kind(http://enyojs.com/api/#enyo.Control::addClass). See the code below:

enyo.kind({
    name: "Menu",
    kind: "Control",
    components: [
        {name: "back", tag:"div"}
    ]

});
var menu = new Menu();
menu.addClass("box");
menu.write();

My css is then in an external style sheet:

.box{
    background-color:red;
    width: 520px;
    height: 600px;
    margin:auto;
    margin-top:75px;
}

Hope that helps. If you find a better way please share it.