How to use styled-tools - 10 common examples

import styled from '@emotion/styled';
import { Box } from '@neo-one/react-common';
import { prop } from 'styled-tools';

export const Text = styled(Box)`
  color: ${prop('theme.gray0')};
  ${prop('theme.fonts.axiformaBook')};
  ${prop('theme.fontStyles.caption')};
`;

import styled from '@emotion/styled';
import { Box } from '@neo-one/react-common';
import { prop } from 'styled-tools';

export const ProblemCount = styled(Box)`
  color: ${prop('theme.gray0')};
  ${prop('theme.font.axiformaRegular')};
  ${prop('theme.fontStyles.body1')};
`;

import styled from '@emotion/styled';
import { Box } from '@neo-one/react-core';
import { prop } from 'styled-tools';
import background from '../static/img/background.svg';

export const Background = styled(Box)`
  background-color: ${prop('theme.black')};
  background-image: url('${background}');
`;

import styled from '@emotion/styled';
import { ButtonBase } from '@neo-one/react-core';
import { prop } from 'styled-tools';

export const IconButton = styled(ButtonBase)`
  color: ${prop('theme.black')};
  outline: none;
  cursor: pointer;
  padding: 2px 2px;

  &:hover {
    background-color: rgba(46, 40, 55, 0.25);
  }
`;

import styled from '@emotion/styled';
import { prop } from 'styled-tools';
import { Input } from './Input';

export const TextInput = styled(Input)`
  padding: 0 4px;
  outline: none;
  ${prop('theme.fonts.axiformaRegular')};
  ${prop('theme.fontStyles.subheading')};
  background-color: white;
  height: 40px;
  border: 1px solid rgba(0, 0, 0, 0.2);

  &:hover {
    border: 1px solid rgba(0, 0, 0, 0.3);
  }

  &:focus {
    border: 1px solid rgba(0, 0, 0, 0.3);
  }
`;

import { theme } from "styled-tools";
import styled from "../styled";
import use from "../use";
import Box, { BoxProps } from "../Box";

export interface InlineProps extends BoxProps {}

const Inline = styled(Box)`
  display: inline;
  ${theme("Inline")};
`;

export default use(Inline, "span");

import styled from 'styled-components'
import { theme } from 'styled-tools'

const Paragraph = styled.p`
  max-width: 80ch;
  ${theme('typography.paragraph')};
  color: ${theme('palette.black')};
  margin-top: ${theme('spacing.medium')};
  margin-bottom: ${theme('spacing.medium')};
`

export default Paragraph

import { theme } from "styled-tools";
import styled from "../styled";
import use from "../use";
import Box, { BoxProps } from "../Box";

export interface TableProps extends BoxProps {}

const Table = styled(Box)`
  ${theme("Table")};
`;

export default use(Table, "table");

import styled from "styled-components";
import { theme as involves } from "../../theme";
import { theme, ifProp } from "styled-tools";

export const Wrapper = styled.div`
  display: block;
  margin-bottom: ${ifProp(
    "noMargin",
    "0",
    theme("spacing.space4", involves.spacing.space4)
  )};
`;

import { theme } from "styled-tools";
import styled from "../styled";
import use from "../use";
import Box, { BoxProps } from "../Box";

export interface GroupItemProps extends BoxProps {}

const GroupItem = styled(Box)`
  ${theme("GroupItem")};
`;

export default use(GroupItem, "div");