How to use @emotion/styled - 10 common examples

/* global render */
/** @jsx jsx */
import { css } from "@emotion/core";
import styled from "@emotion/styled";

const SomeComponent = styled.div`
	display: flex;
	background-color: ${props => props.color};
`;

const AnotherComponent = styled.h1(
	{
		color: "hotpink",
	},
	props => ({ flex: props.flex })
);

render(
	
		
			<span>
				Some text.
			</span>

import logoIcon from 'images/logo.sprite.svg';
import sendIcon from 'images/send.sprite.svg';
import chartIcon from 'images/chart.sprite.svg';
import transactionsIcon from 'images/transaction.sprite.svg';
import addressBookIcon from 'images/address-book.sprite.svg';
import settingsIcon from 'images/settings.sprite.svg';
import consoleIcon from 'images/console.sprite.svg';
// import shapeshiftIcon from 'images/shapeshift.sprite.svg';
// import trustListIcon from 'images/trust-list.sprite.svg';

const slideUp = keyframes`
  from { opacity: 0; transform: translateY(70%) }
    to { opacity: 1; transform: translateY(0) }
`;

const Nav = styled.nav({
  gridArea: 'navigation',
  position: 'relative',
  background: 'linear-gradient(to top, rgba(0,0,0,.6), transparent)',
});

const NavBar = styled.div({
  width: '100%',
  height: '100%',
  display: 'flex',
  justifyContent: 'center',
  paddingBottom: 10,
  animation: `${slideUp} ${timing.slow} ${consts.enhancedEaseOut}`,
});

const AboveNav = styled.div({
  position: 'absolute',

import settingsIcon from 'icons/settings.svg';
import consoleIcon from 'icons/console.svg';
import userIcon from 'icons/user.svg';
import tokenIcons from 'icons/blockexplorer-invert-white.svg';
import { legacyMode } from 'consts/misc';
// import shapeshiftIcon from 'icons/shapeshift.svg';
// import trustListIcon from 'icons/trust-list.svg';

__ = __context('NavigationBar');

const slideUp = keyframes`
  from { opacity: 0; transform: translateY(70%) }
    to { opacity: 1; transform: translateY(0) }
`;

const Nav = styled.nav({
  gridArea: 'navigation',
  position: 'relative',
  background: 'linear-gradient(to top, rgba(0,0,0,.6), transparent)',
});

const NavBar = styled.div({
  width: '100%',
  height: '100%',
  display: 'flex',
  justifyContent: 'center',
  paddingBottom: 10,
  animation: `${slideUp} ${timing.slow} ${consts.enhancedEaseOut}`,
});

const AboveNav = styled.div({
  position: 'absolute',

Avatar as MuiAvatar,
  ClickAwayListener,
  Divider as MuiDivider,
  Grow as MuiGrow,
  IconButton,
  ListItemIcon,
  ListItemText as MuiListItemText,
  MenuItem as MuiMenuItem,
  MenuList as MuiMenuList,
  Paper as MuiPaper,
  Popper as MuiPopper,
} from "@material-ui/core";
import Cookies from "js-cookie";
import jwtDecode from "jwt-decode";

const UserPhoto = styled(IconButton)({
  padding: "12px",
  "&:hover": {
    background: "#2d3db4",
  },
  "&:active": {
    background: "#2938a5",
  },
  // avatar on header
  ".MuiAvatar-root": {
    height: "32px",
    width: "32px",
    fontSize: "14px",
    lineHeight: "18px",
  },
});

// External Dependencies
import React, { Component } from 'react';
import styled from '@emotion/styled';
import {
  VictoryChart,
  VictoryAxis,
  VictoryCandlestick,
  VictoryPortal,
  VictoryLabel,
  VictoryTooltip,
} from 'victory';

__ = __context('MarketData');

const MarketDepthInner = styled.div({
  position: 'relative',
  flex: 1,
  minHeight: 300,
  maxWidth: '50%',
  marginLeft: 5,
});
/**
 * Creates a Victory Chart that uses CandleSticks
 *
 * @export
 * @class Candlestick
 * @extends {Component}
 */
export default class Candlestick extends Component {
  // Mandatory React method

// Internal Global
import { selectContact, deleteContact } from 'lib/addressBook';
import Icon from 'components/Icon';
import Tooltip from 'components/Tooltip';
import { openConfirmDialog, openModal } from 'lib/ui';
import AddEditContactModal from 'components/AddEditContactModal';
import { isCoreConnected } from 'selectors';
import { timing } from 'styles';
import * as color from 'utils/color';
import { defaultMenu } from 'lib/contextMenu';
import plusIcon from 'icons/plus.svg';

__ = __context('AddressBook');

const ContactComponent = styled.div(
  ({ theme }) => ({
    display: 'flex',
    alignItems: 'center',
    padding: '.4em 30px',
    transitionProperty: 'background, color',
    transitionDuration: timing.normal,
    cursor: 'pointer',

    '&:hover': {
      background: theme.mixer(0.05),
    },
  }),
  ({ selected, theme }) =>
    selected && {
      '&, &:hover': {
        background: color.fade(theme.primary, 0.4),

import memoize from 'utils/memoize';
import styled from '@emotion/styled';

// Internal
import AutoSuggest from 'components/AutoSuggest';
import FormField from 'components/FormField';
import Button from 'components/Button';
import Icon from 'components/Icon';
import { openModal } from 'lib/ui';
import AddEditContactModal from 'components/AddEditContactModal';
import plusIcon from 'icons/plus.svg';
import { getAddressNameMap, getRecipientSuggestions } from './selectors';

__ = __context('Send');

const RecipientName = styled.span(({ theme }) => ({
  textTransform: 'none',
  color: theme.primary,
}));

const EmptyMessage = styled.div(({ theme }) => ({
  fontSize: '.9em',
  color: theme.mixer(0.625),
  width: '100%',
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
}));

const filterRecipients = memoize((suggestions, inputValue) => {
  if (!suggestions) return [];
  const query = inputValue || '';

const ToolbarButton = ({ forwardRef, ...rest }) => {
  return ;
};

export default ToolbarButton;

ToolbarButton.propTypes = {
  // eslint-disable-next-line react/forbid-prop-types
  forwardRef: PropTypes.object
};

ToolbarButton.defaultProps = {
  forwardRef: undefined
};

const StyledButton = styled.button(
  {
    alignItems: "center",
    cursor: "pointer",
    display: "flex",
    justifyContent: "center",

    border: "none",
    height: 28,
    width: 28,
    margin: "0 2px",
    transition: "all 0.2s ease",

    ":focus": {
      outline: "none",
      transform: "scale(1.15)"
    },

};

type ButtonProps = {
  /* Affects the visual style of the lozenge */
  appearance: 'default' | 'primary' | 'danger' | 'create' | 'warning',
  /* The value displayed within the lozenge. */
  variant: 'bold' | 'subtle',
};
type Props = ButtonProps & {
  children: Node,
  onClick: MouseEvent => void,
  onRemove: MouseEvent => void,
};

const PillWrapper = styled.div({ display: 'inline-flex' });
const PillButton = styled.button(({ appearance, variant }: Props) => {
  const fontSizeNumeric = 0.75;
  const fontSize = `${fontSizeNumeric}em`;
  const borderRadius = `${fontSizeNumeric * 2}em`;

  return {
    backgroundColor:
      variant === 'bold'
        ? boldBackgroundColor[appearance].default
        : subtleBackgroundColor[appearance].default,
    color: variant === 'bold' ? boldTextColor[appearance] : subtleTextColor[appearance],
    alignItems: 'center',
    border: 0,
    cursor: 'pointer',
    display: 'flex',
    fontSize: fontSize,
    fontWeight: 500,

const StyledListItem = styled.li({
  fontSize: '1rem',
  a: {
    ...listItemStyles,
    textDecoration: 'none',
    display: 'block',
    // paddingLeft: '5px',
    width: '80%',
    '&.active': {
      color: colors.primary,
      pointerEvents: 'none'
    }
  }
})

const ExpandAll = styled.button(listItemStyles, smallCaps, {
  display: 'flex',
  alignItems: 'center',
  marginBottom: 12,
  padding: 0,
  border: 0,
  fontSize: 12,
  lineHeight: 1,
  background: 'none',
  outline: 'none',
  cursor: 'pointer',
  svg: {
    marginLeft: -4,
    marginRight: 4
  }
})