Using media queries in react with emotion and koutla-swiss

mq-demo.js

import React from "react";
import {css} from "emotion";
import {mq} from "koutla-swiss";

const styles = {
  text: css({
    color: "black",
    ...mq("min-width: 480px", {
      color: "red",
    }),
    ...mq("min-width: 960px", {
      color: "blue",
    }),
  }),
};

export default () => (
  <p className={styles.text}>{"Hello, world!"}</p>
);