How to use the aphrodite/no-important.StyleSheet.create function in aphrodite

styles.table__th__inner,
                    this.props.smallRow && styles.table__th__inner_smallRow,
                    this.props.headerStyles
                  )} data-l10n-id={heading} />
                  : heading
              }
            
          })}
        
      
      {this.generateTableBody()}
    
  }
}

const styles = StyleSheet.create({
  // By default the width and margin are not specified.
  // It can be specified by setting css to tableClassNames.
  // See 'styles.devices__devicesList' on syncTab.js for example.
  table: {
    boxSizing: 'border-box',
    cursor: 'default',
    borderSpacing: 0,

    // #10434: Enable border on the table by default
    borderCollapse: 'collapse'
  },

  // Setting 'fillAvailable' maximizes the width of the table.
  table_fillAvailable: {
    width: '-webkit-fill-available'
  },

let backgroundColor;
    if (this.state && this.state.highlightedSignal === signal.name) {
      // when signal highlighted,
      // darkened background and lightened text.

      const darkenedColors = shade(colors, -0.5);
      const lightenedColors = shade(colors, 0.9);
      colorRgbStr = `rgb(${lightenedColors.join(',')})`;
      backgroundColor = `rgba(${darkenedColors.join(',')},0.5)`;
    } else {
      const colorsCommaSep = colors.join(',');
      colorRgbStr = `rgb(${colorsCommaSep})`;
      backgroundColor = `rgba(${colorsCommaSep},0.2)`;
    }

    const style = StyleSheet.create({
      signal: { color: colorRgbStr, backgroundColor }
    }).signal;
    return style;
  }

marginTop: '0rem',
      display: 'flex',
      alignItems: 'center',
      paddingRight: '1rem',
      ':before': {
        display: 'none',
      },
    },
    cell_header: {},
    inner: {
      display: 'block',
      width: '100%',
    },
  };

  const styles = StyleSheet.create(deepAssign(
    base,
    {
      // responsive to two column state
      table_two: {
        display: 'flex',
        flexDirection: 'column',
        [breakpoint(bp.SMALL)]: base.table,
      },
      row_two: {
        display: 'flex',
        flexDirection: 'column',
        [breakpoint(bp.SMALL)]: base.row,
      },
      row_header_two: {
        display: 'none',
        [breakpoint(bp.SMALL)]: base.row_header,

dataL10nId='enableSpellCheck'
            prefKey={settings.SPELLCHECK_ENABLED}
            settings={this.props.settings}
            onChangeSetting={this.props.onChangeSetting}
          />
          {this.spellCheckLanguages}
        
      
      <footer>
        <div data-l10n-id="requiresRestart">
      </div></footer>
    
  }
}

const styles = StyleSheet.create({
  advancedTabMain: {
    paddingBottom: '40px'
  },

  swipeNavigation: {
    display: 'flex',
    alignItems: 'center'
  },

  swipeNavigation__shortLabel: {
    marginRight: '5px'
  },

  swipeNavigation__longLabel: {
    marginLeft: '5px'
  },

return <section>
      
      
    </section>
  }
}

const styles = StyleSheet.create({
  sitePermissions__list: {
    listStyle: 'none'
  },

  sitePermissions__list__item: {
    display: 'flex',
    alignItems: 'center',
    lineHeight: 1.4
  },

  sitePermissions__list__item__button: {
    marginRight: '.25rem',
    color: globalStyles.color.braveOrange,

    ':hover': {
      color: globalStyles.color.braveOrange

return;
    }

    const selection = window.getSelection();
    const range = selection.getRangeAt(0);
    const rect = range.getBoundingClientRect();
    menu.style.opacity = "1";
    menu.style.top = `${rect.top + window.scrollY - menu.offsetHeight}px`;
    menu.style.left = `${rect.left +
      window.scrollX -
      menu.offsetWidth / 2 +
      rect.width / 2}px`;
  };
}

const styles = StyleSheet.create({
  editorContainer: {
    ...sharedStyles.wbTypography.body,
  },

  editorContainerEditable: {},

  editorContainerUneditable: {},

  editorContainerFocused: {},

  editorContainerManagerQuotedWork: {
    opacity: 0.4,
  },

  editorEditable: {
    minHeight: "4em",

GitHub User Search
        
      
      <p>
        Browse users and their profiles via <a href="https://developer.github.com/v3/">the GitHub API</a>
      </p>
    
  );
}

const styles = StyleSheet.create({
  Logo_icon: {
    marginRight: 8,
  },

  Logo_title: {
    fontSize: 25,
  },

  Logo_link: {
    textDecoration: 'none',
    color: 'inherit',
  },

  Logo_subTitle: {
    marginTop: 5,
    fontSize: 14,

this.state.isAnimating && styles.restartFlip,
                        ]}
                    />
                    <span>{labelText}</span>
                
            
        );
    }
}

const refreshIcon = {
    xlarge:
        "M50.046 83.391q8.778 0 16.302-4.218t12.084-11.685q.741-1.083 3.477-7.638.513-1.482 1.938-1.482l12.483 0q.855.057 1.482.627t.627 1.14-.057.741q-4.104 17.499-17.442 28.329t-31.179 10.83q-9.519 0-18.411-3.591t-15.846-10.203l-8.379 8.379q-1.254 1.254-2.964 1.254-1.653 0-2.907-1.254t-1.254-2.907l0-29.184q0-1.71 1.254-2.964t2.907-1.197l29.184 0q1.71 0 2.964 1.254 1.197 1.197 1.197 2.907t-1.197 2.907l-8.949 8.949q9.747 9.006 22.686 9.006zm49.989-75.069l0 29.184q.057 1.71-1.197 2.964t-2.964 1.197l-29.184 0q-1.71 0-2.964-1.254t-1.197-2.907q0-1.71 1.254-2.907l9.006-9.006q-9.633-8.949-22.743-8.949-8.721.057-16.302 4.275t-12.141 11.628q-.741 1.083-3.42 7.638-.513 1.482-1.938 1.482l-12.996 0q-.855 0-1.482-.627t-.57-1.425l0-.456q4.218-17.442 17.556-28.272t31.293-10.887q9.462 0 18.468 3.591t15.96 10.203l8.493-8.379q1.197-1.254 2.907-1.254t2.964 1.254 1.197 2.907z",
};

const styles = StyleSheet.create({
    restartLabel: {
        display: "flex",
        alignItems: "center",
    },
    restartIcon: {
        display: "block",
        marginRight: 5,
        width: "0.9em",
        height: "0.9em",
    },
    restartFlip: {
        animationName: {
            "0%": {
                transform: "rotate(0deg)",
            },
            "100%": {

const gen = (def: SheetDefinition) => {
    const elementName = typeof element === 'string' ? element : element.name;
    const styles = StyleSheet.create({
      [elementName]: def,
    });
    const El = element;
    return (props: Props) => (
      
    );
  };
  gen.attrs = (props: Props) => (def: SheetDefinition) =>

)}>
        {
          this.secureIcon
        }
        {
          this.partitionInfo
        }
        {
          this.connectionInfo
        }
      
    
  }
}

const styles = StyleSheet.create({
  secureIcon: {
    display: 'flex',
    alignItems: 'center'
  },

  secureIcon__fa: {
    position: 'absolute'
  },

  secureIcon__fa_extendedValidation: {
    color: '#008000'
  },

  secureIcon__label: {
    position: 'relative',
    left: globalStyles.spacing.dialogInsideMargin