Skip to main content

How to declare a variant on sub-element which is another component?

.component .elementThe element you want to style.another-conflicting-componentThe selector you want to insert
+component('.component')
  +register
    +element('.element')
      +spot-exception-variant('.another-conflicting-component')

  +__________________________
  +element('.element')
    +default
      display: inline-flex

    +spot-exception-variant('.another-conflicting-component')
      position: relative







.component .element {
  display: inline-flex;
}

.component .element.another-conflicting-component {
  position: relative;
}


More info: +spot-exception-variant, +element, +register, +component, separator +___