How to use the styletron-react.styled function in styletron-react

// @flow

import * as React from "react";
import {styled, withStyle, withWrapper} from "styletron-react";

// Note: explicit generic annotation is here because this is not inferred correctly
const Foo = styled<{foo: "foo"}>("div", (_props: {foo: "foo"}) => ({
  color: "red",
}));

// $FlowFixMe
; // Missing foo

// $FlowFixMe
; // Wrong foo

;

const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));

// $FlowFixMe
; // Missing foo
// $FlowFixMe

// @flow

import * as React from "react";
import {styled, withStyle, withWrapper} from "styletron-react";

const Foo = styled("div", (props: {foo: "foo"}) => ({
  color: props.foo,
}));
const Bar = withWrapper(
  Foo,
  StyledComponent => (props: {foo: "foo", bar: "bar"}) => (
    <div>
      
    </div>
  ),
);

// $FlowFixMe
; // missing foo and bar

// $FlowFixMe
; // missing bar

// @flow

import * as React from "react";
import {styled, withWrapper} from "styletron-react";

const Foo = styled("div", {color: "red"});
const Bar = withWrapper(Foo, StyledComponent => props => (
  <div>
    
  </div>
));

;

StatefulCheckbox as Checkbox,
  StyledRoot,
  StyledLabel,
  StyledCheckmark,
  StyledInput,
  Checkbox as StatelessCheckbox,
} from './index.js';

import examples from './examples-list.js';

const onChange = e => {
  // eslint-disable-next-line no-console
  console.log('Checked:', e.target.checked);
};

const Icon = styled('span', () => {
  return {
    display: 'flex',
    alignItems: 'center',
    ':before': {
      content: '"Click to focus on checkbox"',
      display: 'inline-block',
      boxSizing: 'border-box',
      verticalAlign: 'middle',
      borderRadius: '2px',
      borderWidth: '2px',
      borderStyle: 'solid',
      borderColor: 'black',
      backgroundColor: 'lightblue',
    },
  };
});

export const h2 = styled("h2", {
  fontFamily: "soleil, sans-serif",
  fontStyle: "normal",
  fontSize: "28px",
  "-webkit-font-smoothing": "subpixel-antialiased",
});

export const h3 = styled("h3", {
  fontFamily: "soleil, sans-serif",
  fontStyle: "normal",
  fontSize: "20px",
  fontWeight: 600,
  "-webkit-font-smoothing": "subpixel-antialiased",
});

export const sup = styled("sup", {
  marginLeft: ".2em",
  marginRight: ".1em",
  position: "relative",
  top: "-0.4em",
  verticalAlign: "baseline",
  // fontFamily: 'soleil, sans-serif',
  // fontStyle: 'normal',
  // fontSize: '30px',
  // width: '40px',
  // fontWeight: 600,
  // '-webkit-font-smoothing': 'subpixel-antialiased'
});

export const a = styled("a", {
  textDecoration: "none",
  borderBottom: "2px solid #CFF3FF",

/* eslint-disable react/prop-types */
import { styled } from 'styletron-react';

const View = styled('div', ({ style }) => ({
  ...viewStyle,
  style
}));

const viewStyle = {
  alignItems: 'stretch',
  borderWidth: '0px',
  borderStyle: 'solid',
  boxSizing: 'border-box',
  display: 'flex',
  flexBasis: 'auto',
  flexDirection: 'column',
  flexShrink: '0',
  margin: '0px',
  padding: '0px',
  position: 'relative',

':hover': {
    backgroundColor: 'black',
    borderColor: 'black',
    textDecoration: 'none',
  },
  backgroundColor: blueColor,
  border: `1px solid ${blueColor}`,
  color: 'white',
  cursor: 'pointer',
  display: 'inline-block',
  marginRight: '20px',
  minWidth: '140px',
  padding: '10px 0px',
});

const CTASecondaryButton = styled(OutboundLink, {
  ':hover': {
    borderColor: 'black',
    color: 'black',
    textDecoration: 'none',
  },
  backgroundColor: 'white',
  border: `1px solid ${blueColor}`,
  color: blueColor,
  cursor: 'pointer',
  display: 'inline-block',
  minWidth: '140px',
  padding: '10px 0px',
});

const HomeLayout = styled('div', {
  '@media (max-width: 800px)': {

color: styleProps.hasSideNav ? '#999' : '#FFF',
  fontSize: '12px',
  ...styleProps.overrides,
}));

const ExternalLink = styled(OutboundLink, {
  backgroundColor: 'transparent',
  color: 'inherit',
  textDecoration: 'none',
});

const InternalLink = props => {
  return ;
};

const LinkText = styled('span', ({styleProps = {}}) => ({
  color: styleProps.hasSideNav ? '#999' : '#FFF',
  textTransform: 'uppercase',
  ':hover': {
    textDecoration: 'underline',
  },
}));

export default ({styleProps = {}}) => {
  return (
    <footer>
      
        </footer>

display: 'inline-block',
    textAlign: 'center',
    fontSize: props.fontSize || 14,
    fontFamily: 'arial',
    padding: '6px 12px',
    border: 0,
    cursor: 'pointer',
    color: THEME.textColor,
    backgroundColor: THEME.buttonColor,
    ':hover': {
      backgroundColor: THEME.buttonColorHover
    }
  }
})

const Badge = styled('span', (props) => {
  return {
    display: 'inline-block',
    textAlign: 'center',
    fontSize: 12,
    fontWeight: 700,
    borderRadius: '10px',
    padding: '3px 6px',
    position: 'relative',
    top: -1,
    color: THEME.buttonColorHover,
    backgroundColor: THEME.textColor
  }
})

class LikeButton extends Component {
  render () {