Matchers

is

Add conditional properties matching a given prop name and optional value. If the second param is not given, the prop is treated like a boolean.

const Test = styled.div`
  ${is('enabled')`
    color: green;
  `}
  ${is('size', 'big')`
    font-size: 20px;
  `}
`;
const Example = () => <Test enabled size="big">test</Test>;

isnt

Add conditional properties not matching a given prop name and optional value. If the second param is not given, the prop is treated like a boolean.

const Test = styled.div`
  ${isnt('enabled')`color: green`};
  ${isnt('size', 'big')`
    font-size: 16px;
  `}
`;
const Example = () => <Test size="small">test</Test>;

isAny

Add conditional properties when a prop matches a value in a given array.

const Test = styled.div`
  ${isAny('size', ['small', 'medium'])`color: green`};
`;
const Example = () => <Test size="small">test</Test>;

isntAny

Add conditional properties when a prop is not within a given array.

const Test = styled.div`
  ${isntAny('size', ['small', 'medium'])`color: green`};
`;
const Example = () => <Test size="large">test</Test>;

value

Apply the value of a given prop name to a property.

const Test = styled.div`
  width: ${value('size')};
`;
const Example = () => <Test size="4rem">test</Test>;

swap

A quick way to apply values for both the true and false condition of a boolean prop.

const Test = styled.div`
  color: ${swap('enabled', 'green', 'red')};
`;
const Example = () => <Test enabled>test</Test>;

choose

Map the potential values of a given prop to CSS properties.

const sizes = {
  small: '10px',
  medium: '20px',
  large: '30px',
};
const Test = styled.div`
  width: ${choose('size', sizes)};
`;
const Example = () => <Test size="medium">test</Test>;

over

Conditionally render properties when prop is greater than then given value.

const Test = styled.div`
  ${over('amount', 10)`color: green`};
`;
const Example = () => <Test amount={11}>test</Test>;

under

Conditionally render properties when prop is less than then given value.

const Test = styled.div`
  ${under('amount', 10)`color: green`};
`;
const Example = () => <Test amount={9}>test</Test>;

between

Conditionally render properties when prop is between two values.

const Test = styled.div`
  ${between('amount', 5, 10)`color: green`};
`;
const Example = () => <Test amount={7}>test</Test>;