Css helper component with passed in prop in TS

[quinnvaughn]

(This is partly a TS question)
So I have a bunch of width styles that I reuse for a wide variety of components. Unfortunately right now I'm duplicating them. However, if I want to DRY it, I need to pass in a prop that is an object (it's a bunch of breakpoints). It looks like so:

export const WidthStyles = css<{ $width: WidthBreakpoints }>`
  max-width: ${({ $width: width }) => formatPx(width?.sm)};
  width: 100%;
  @media screen and (min-width: ${({ theme }) => theme.breakpoints.min.sm}) {
    max-width: ${({ $width: width }) => formatPx(width?.sm)};
  }
  @media screen and (min-width: ${({ theme }) => theme.breakpoints.min.md}) {
    max-width: ${({ $width: width }) => formatPx(width?.md)};
  }
  @media screen and (min-width: ${({ theme }) => theme.breakpoints.min.lg}) {
    max-width: ${({ $width: width }) => formatPx(width?.lg)};
  }
  @media screen and (min-width: ${({ theme }) => theme.breakpoints.min.xl}) {
    max-width: ${({ $width: width }) => formatPx(width?.xl)};
  }
`

I can make the component fine with the css helper but I don't know how to add them to another component. It's very easy if you don't have any props, you just ${style} them, but it throws an error when you're passing in a prop. Does anyone know how to correctly add the styles or am I just SOL?

I am also open to doing the same thing a different way.

[quinnvaughn]

I can do this as a function that returns the css helper, and takes in the width as a param, but that seems like a less than ideal solution, but possibly the only one.

export function widthStyles(width?: WidthBreakpoints) {
  return css`
    max-width: ${formatPx(width?.sm)};
    width: 100%;
    @media screen and (min-width: ${({ theme }) => theme.breakpoints.min.sm}) {
      max-width: ${formatPx(width?.sm)};
    }
    @media screen and (min-width: ${({ theme }) => theme.breakpoints.min.md}) {
      max-width: ${formatPx(width?.md)};
    }
    @media screen and (min-width: ${({ theme }) => theme.breakpoints.min.lg}) {
      max-width: ${formatPx(width?.lg)};
    }
    @media screen and (min-width: ${({ theme }) => theme.breakpoints.min.xl}) {
      max-width: ${formatPx(width?.xl)};
    }
  `
}

Usage

${({ $width }) => widthStyles($width)};

[quantizor]

Your approach with css<{ $width: WidthBreakpoints }> is correct. The props type on the css helper merges with the styled component's props when used as an interpolation:

const WidthStyles = css<{ $width: WidthBreakpoints }>`
  max-width: ${({ $width }) => formatPx($width?.sm)};
`;

const MyComponent = styled.div<{ $width: WidthBreakpoints }>`
  ${WidthStyles}
`;

The component using the shared styles needs to declare the same prop in its generic parameter. The function-returning-css approach you mentioned also works and avoids the prop type duplication:

const widthStyles = (width: WidthBreakpoints) => css`
  max-width: ${formatPx(width?.sm)};
`;

const MyComponent = styled.div<{ $width: WidthBreakpoints }>`
  ${({ $width }) => widthStyles($width)}
`;

Both are valid patterns.