JSFiddle - React, Tailwind, and code Playground
CSS
.green .onyx-input, .green .title {
background-color: #00ff00;
}
.blue .onyx-input, .blue .title {
background-color: #0000ff;
}
.red .onyx-input, .red .title {
background-color: #ff0000;
}
JavaScript
enyo.kind({
name: "ex.App",
components:[
{classes:"title", content: "Select a button to change the theme"},
{kind: "onyx.Button", classes:"onyx-affirmative", content:"Green", ontap:"goGreen"},
{kind: "onyx.Button", classes:"onyx-blue", content:"Blue", ontap:"goBlue"},
{kind: "onyx.Button", classes:"onyx-negative", content:"Red", ontap:"goRed"},
{kind: "onyx.InputDecorator", classes: "red", components:[
{kind:"onyx.Input", placeholder:"I change color"}
]}
],
goGreen:function() {
this.setClasses("green");
},
goRed:function() {
this.setClasses("red");
},
goBlue:function() {
this.setClasses("blue");
}
});
new ex.App().write();