Add CSS-in-JS support

[ar-to]

Context

It would be nice to change all class names via javascript once the itemSelector class name is passed to the SortFilter and child component.

Process or Steps to Reproduce

• consider using emotion but full list of available libraries can be found here
• take css object out into a separate file
• update class names using itemSelector variable and BEM methodology

Expected result

          <div class="sortblock__inner">
            <img class="sortblock alt="" />
          </div>

Current result

Using a index.css in the docs/

Possible Fix

App.js

...
const itemSelector = 'sortblock';
...
      <SortFilter defaultSort={defaultSort} taxonomies={taxonomies} itemSelector={itemSelector}>
        <Elements {...records} itemSelector={itemSelector} />
      </SortFilter>

css pseudo code

css(itemSelector) = {
 ${itemSelector}__img = {css`
      padding: 32px;
    `
}

then in the img element do something like but apply it to all of the classes.

<img className={`${itemSelector}__img`} src={src} alt="" />

---

Examples

• stackoverflow sample