How to use the @emotion/styled.div function in @emotion/styled

// 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),

color: props.textColour,
  position: "absolute",
  backgroundColor: "transparent",
  top: "10px",
  left: "24px",
  borderRadius: "3px",
  display: "flex",
  textTransform: 'uppercase',
  width: "80px",
  padding: "4px",
  fontWeight: theme.weight.bold,
  border: "1px solid #FFFFFF",
  boxShadow: "inset 0 0 0 1px #E6E6E6"
}));

export const Hash = styled.div(props => ({
  color: props.textColour,
  position: "absolute",
  top: "14px",
  left: "10px"
}));

export const Fields = styled("div")({
  display: "flex",
  flexDirection: "column",
  marginLeft: "60px",
  "@media screen and (max-width: 540px)": {
    marginLeft: "0"
  }
});

export const FieldWrapper = styled("div")({

import React from "react";
import type { clutch as IClutch } from "@clutch-sh/api";
import { Table, TableRow } from "@clutch-sh/core";
import { useDataLayout } from "@clutch-sh/data-layout";
import styled from "@emotion/styled";
import _ from "lodash";

const StatefulSetsContainer = styled.div({
  display: "flex",
  maxHeight: "50vh",
});

const StatefulSetTable = () => {
  const statefulSetListData = useDataLayout("statefulSetListData", { hydrate: false });
  const statefulSets = statefulSetListData.displayValue()
    ?.statefulSets as IClutch.k8s.v1.StatefulSet[];

  return (
    
      <table></table>

import TextField from 'components/TextField';
import * as color from 'utils/color';
import { consts, timing } from 'styles';
import NexusAddress from 'components/NexusAddress';

const PanelHolder = styled.div(({ theme }) => ({
  background: color.lighten(theme.background, 0.2),
  flex: '1',
  padding: '0rem 0rem 1rem 0rem',
  position: 'relative',
  display: 'flex',
  flexDirection: 'column',
  borderLeft: `thick solid ${theme.primary}`,
}));

const Title = styled.div(({ theme }) => ({
  background: color.lighten(theme.background, 0.4),
  color: theme.primary,
  fontSize: '1.5em',
  paddingLeft: '0.25em',
}));

const AccountsHolder = styled.div({
  padding: '0.5rem 1rem 0rem 1rem',
  flexGrow: 1,
  flexBasis: '35em',
  overflow: 'auto',
});

const AccountBox = styled.div(({ theme }) => ({
  background: color.lighten(theme.background, 0.4),
  border: `1px solid ${theme.primary}`,

import Switch from 'components/Switch';
import TextField from 'components/TextField';
import * as Tritium from 'lib/tritiumApi';
import {
  openConfirmDialog,
  openModal,
  openErrorDialog,
} from 'actions/overlays';

import PinLoginModal from 'components/User/PinLoginModal';

const SmallModal = styled(Modal)(({ theme }) => ({
  width: 'auto',
}));

const Container = styled.div(({ theme }) => ({
  margin: '1em',
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
}));

const OptionLabel = styled.label(({ theme }) => ({
  color: theme.primary,
  marginTop: '1.75em',
}));

const Option = styled.div({
  display: 'flex',
  flexDirection: 'row',
});

day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
};

const Row = styled.div({
  display: 'grid',
  gridTemplateAreas: '"label value"',
  gridTemplateColumns: '1fr 2fr',
  alignItems: 'start',
  columnGap: '1em',
  marginBottom: '.6em',
});

const Label = styled.div(({ theme }) => ({
  gridArea: 'label',
  textAlign: 'right',
  color: theme.mixer(0.875),
}));

const Value = styled.div({
  gridArea: 'value',
  wordBreak: 'break-word',
});

const CloseButton = styled(Button)({
  marginLeft: '1em',
  width: '25%',
});

const Field = ({ label, children }) => (

import { deleteContact } from 'lib/addressBook';
import ExternalLink from 'components/ExternalLink';
import Icon from 'components/Icon';
import Tooltip from 'components/Tooltip';
import NexusAddress from 'components/NexusAddress';
import { openConfirmDialog, openModal } from 'lib/ui';
import AddEditContactModal from 'components/AddEditContactModal';
import { isCoreConnected } from 'selectors';
import timeZones from 'data/timeZones';
import { timing } from 'styles';
import trashIcon from 'icons/trash.svg';
import editIcon from 'icons/edit.svg';

__ = __context('AddressBook');

const ContactDetailsComponent = styled.div({
  gridArea: 'details',
  maxHeight: '100%',
  overflowY: 'auto',
  marginRight: -30,
  paddingRight: 30,
});

const SectionHeader = styled.div({
  fontSize: '1.2em',
  marginTop: '1.5em',
});

const Header = styled.div(({ theme }) => ({
  paddingBottom: 10,
  borderBottom: `1px solid ${theme.primary}`,
  display: 'flex',

import styled from "@emotion/styled";

let Small = styled.div(
  {
    fontSize: "12px",
    lineHeight: "12px",
    fontWeight: "normal",
    whiteSpace: "nowrap",
    maxWidth: "190px"
  },
  ({ align }) => ({
    textAlign: align
  })
);

let Domain = styled.div(
  {
    lineHeight: "16px",
    paddingBottom: "3px",
    whiteSpace: "nowrap",
    maxWidth: "190px"
  },
  ({ children, padding = false }) => ({
    fontSize:
      children.length < 14
        ? "24px"
        : children.length > 12 &&
          children.length < 25 &&
          ((24 - children.length) / 10) * 23 > 13
        ? `${((24 - children.length) / 10) * 23}px`
        : "14px",
    paddingTop: padding ? "13px" : "0"

width: 20,
    height: 20,
    marginRight: 6,
    fill: 'currentColor',
  },
})

function AsideLink(props) {
  return (
    
      
    
  )
}

const EditLink = styled.div({
  display: 'none',
  marginTop: 48,
  justifyContent: 'flex-end',
  [breakpoints.lg]: {
    display: 'flex',
  },
  [breakpoints.md]: {
    display: 'none',
  },
  [breakpoints.sm]: {
    display: 'flex',
    marginTop: 24,
  },
})

export default function PageContent(props) {