Conditional CSS with styled tag

Ask your Question

Is it possible to do something like the following?

const TopLevelList = styled.ul<{ dark?: boolean }>`
  border-top: 1px solid ${BrandColors.BORDER};
  margin-top: 0;

  ${props => props.dark && ({
    color: 'black',
  })}
`;

Typescript is giving the following error:

Argument of type '(props: { dark?: boolean | undefined; }) => false | { color: string; } | undefined' is not assignable to parameter of type 'string | number | CSSProperties | ((props: { dark?: boolean | undefined; }) => TLength)'.
  Type '(props: { dark?: boolean | undefined; }) => false | { color: string; } | undefined' is not assignable to type '(props: { dark?: boolean | undefined; }) => TLength'.
    Type 'false | { color: string; } | undefined' is not assignable to type 'TLength'.
      Type 'undefined' is not assignable to type 'TLength'.ts(2345)

[nhooyr]

The readme has an example that shows you can do this:

import { styled } from 'linaria/react';
import { families, sizes } from './fonts';

// Write your styles in `styled` tag
const Title = styled.h1`
  font-family: ${families.serif};
`;

const Container = styled.div`
  font-size: ${sizes.medium}px;
  color: ${props => props.color};
  border: 1px solid red;

  &:hover {
    border-color: blue;
  }

  ${Title} {
    margin-bottom: 24px;
  }
`;

// Then use the resulting component
<Container color="#333">
  <Title>Hello world</Title>
</Container>;

[daviestar]

No support for conditional CSS using the styled tag is the biggest hurdle for us moving to linaria from styled-components in a typescript project, however as suggested by @brandonkal I think something like this:

import React from "react";
import classnames from "classnames";
import { styled } from "linaria/react";

function Button() {
  const [active, setActive] = React.useState(false);
  return (
    <StyledButton
      className={classnames({ active })}
      onClick={() => setActive(true)}
    />
  );
}

const StyledButton = styled.button`
  background: grey;
  &.active {
    background: blue;
  }
`;

which prevents “proper” React props unintentionally leaking to the DOM, something I’ve had issues with before, could be a nice solution (could even be the nicest solution!).

The tradeoff is losing type checking for the conditional styling, which may or may not be a big deal in your project.