Css - Styled Components

import Code from 'components/Code' import Table, { Row, Column } from 'components/Table'

`css`

A helper function to generate CSS from a template literal with interpolations. You need to use this if you return a template literal with functions inside an interpolation due to how tagged template literals work in JavaScript.

If you're interpolating a string you do not need to use this, only if you're interpolating a function.

<Table head={['Arguments', 'Description']}> <Row> <Column> 1. <Code>TaggedTemplateLiteral</Code> </Column> <Column>A tagged template literal with your CSS and interpolations.</Column> </Row> </Table>

Returns an array of interpolations, which is a flattened data structure that you can pass as an interpolation itself.

tsx

import styled, { css } from 'styled-components'

interface ComponentProps {
  $complex?: boolean;
  $whiteColor?: boolean;
}

const complexMixin = css<ComponentProps>`
  color: ${props => (props.$whiteColor ? 'white' : 'black')};
`

const StyledComp = styled.div<ComponentProps>`
  /* This is an example of a nested interpolation */
  ${props => (props.$complex ? complexMixin : 'color: blue;')};
`

If you leave off the css your function will be toString()ed and you'll not get the results you expected.