Skip to main content

How to declare a variant on sub-element?

.component .elementThe element you want to style.variantThe selector you want to insert
+component('.btn')
  +register
    +element('.icon')
      +variant('.highlight')

  display: inline-flex

  +___________________
  +element('.icon')
    +default
      background-color: grey

    +variant('.highlight')
      background-color: red





.btn {
  display: inline-flex;
}

.btn .icon {
  background-color: grey;
}

.btn .icon.highlight {
  background-color: red;
}

More info: +state, +default, +pseudo-element, +element, +register, +component, separator +___