How to get a custom component to use skin?

Webix JS
1

I created a custom text component to allow for enabling/disabling some associated buttons:

  const textId = webix.uid()
    webix.protoUI({
      name: `text-${textId}`,
      enableEx: () => {
        $$(textId).enable()
        $$(coordBtnId).enable()
        $$(addrBtnId).enable()
        $$(selBtnId).enable()
      },
      disableEx: () => {
        $$(textId).disable()
        $$(coordBtnId).disable()
        $$(addrBtnId).disable()
        $$(selBtnId).disable()
      }
    }, webix.ui.text)

{
        id: textId,
        view: `text-${textId}`,
        name: 'location',
        attributes: { spellcheck: false },
.
.
.
}

I am also using the dark skin (dark.min.css).

When I use the custom control in a form, the style does not use the skin? e.g. the background is white, instead of dark.

How do I get the custom control to use the dark skin like the other components in the form?

2

I figured it out right after posting. :slight_smile:

I added this to the proto definition:

$init: function (config) {
        this.$view.className += ' webix_el_text'
      },
3

Hello,
You are right. By default, controls do not inherit the class of the parent view. To do so, you can also use $cssName:“parentName”.
$cssName:“text” in your case: Code Snippet .