mui/pigment-css

Props types do not work when using tagged string literal

Opened this issue · 0 comments

Steps to reproduce

Try adding props types to the tagged string literal, e.g.:

const Div = syled.div<{ $active: boolean; }>`
  color: #333;
  padding: 16px;
  background-color: #f0f0f0;
`;

Current behavior

Throws TS error:

Argument of type 'TemplateStringsArray' is not assignable to parameter of type 'StyledArgument<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>>'.
  Type 'TemplateStringsArray' is not assignable to type 'CSSOthersObject<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>> & { ...; }'.
    Type 'TemplateStringsArray' is not assignable to type 'CSSOthersObject<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>>'.
      Index signature for type 'string' is missing in type 'TemplateStringsArray'.ts(2345)

Expected behavior

It should accept props definition.

Context

It makes sense to be fixed once #82 is fixed.

Your environment

npx @mui/envinfo
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: typescript, props, tagged string template