esr360

.myElement {
  @include position(0, 0, 9, relative);
}

esr360

.myElement {
  @include position(0, 0, 9);
}

esr360

.myElement {
  position: absolute; 
  top: 0; 
  left: 0; 
  z-index: 9;
}

esr360

@include module('myElement') {
  color: blue;
  @include show('someParent', 'active');
}

esr360

@include module('myElement') {
  color: blue;
  @include display(('someParent', 'active'), block, none);
}

esr360

.myElement {
  color: blue;
  display: context('.someParent.active', block, none);
}

esr360

const myElement = ({ context }) => ({
  color: 'blue',
  display: context.someParent.active ? 'block' : 'none'
})

esr360

.myElement {
  color: blue;
  display: none;
  
  .someParent.active & {
    display: block;
  }
}

esr360

.myElement {
  color: blue;
  display: none;
  
  &.active {
    display: block;
  }
}

esr360

import { createUseStyles } from 'react-jss';

export default createUseStyles(theme => ({
  heading: ({ props, config, state }) => ({
    ...
  }),

  ...
}));