diegohaz / diegohaz/styled-tools

TS error when using prop with ThemedStyledComponentsModule

Open
#53 11 comments 1 reaction 0 assignees View on GitHub
bug typescript
Dominant language
JavaScript
Stars
799
Forks
24
PR merge metrics
No merged PRs in 30d

Description

I'm trying to use prop within ifProp, but getting an error that:

```
[ts]
Argument of type '(props?: Props) => Props[keyof Props]' is not assignable to parameter of type 'Interpolation>'.
Type '(props?: Props) => Props[keyof Props]' is not assignable to type 'InterpolationFunction>'.
Type 'ThemeInterface' is not assignable to type 'Interpolation>'.
Type 'ThemeInterface' is not assignable to type 'ReadonlyArray | InterpolationFunction> | ReadonlyArray>>>'.
Property 'length' is missing in type 'ThemeInterface'. [2345]
```

```
interface SpaceProps {
around?: string;
bottom?: string;
left?: string;
right?: string;
top?: string;
}

export const Space = styled.div`
${ifProp(
'around',
css`
margin: ${prop('around')}em;
`
)};
${ifProp(
'top',
css`
margin-top: ${prop('top')}em;
`
)};
${ifProp(
'right',
css`
margin-right: ${prop('right')}em;
`
)};
${ifProp(
'bottom',
css`
margin-bottom: ${prop('bottom')}em;
`
)};
${ifProp(
'left',
css`
margin-left: ${prop('left')}em;
`
)};
`;
```

I'm assuming I'm doing something wrong, but can't quite pinpoint what the problem may be.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.