vue emotion refactor

Button.js

import { css, cx } from "emotion";

const baseStyles = () =>
  css`
    background-color: black;
    color: white;
    cursor: pointer;
    padding: 10px;
    &:hover {
      background-color: red;
    }
  `;

const Button = {
  functional: true,
  props: {
    variant: {
      type: String,
      default: "default"
    }
  },
  render(h, { props }) {
    const className = cx(baseStyles(props));
    return (
      <button type="button" class={className}>
        My Cool Button
      </button>
    );
  }
};

export default Button;