Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Typescript using custom props

See original GitHub issue

The last example in the Using custom props section in the typescript documentation is broken or at least misleading.

I think it should more look like this, or at least this is the way I got it to work in my project. I am not sure whether an additional & HeaderProps is better in the generic type section, but I got it to work without.

const Title =
  styled(({ isActive, ...rest }) => <Header {...rest} />)<{ isActive: boolean }>`
  color: ${props => (props.isActive ? props.theme.primaryColor : props.theme.secondaryColor)}
`;

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:5 (1 by maintainers)

Top GitHub Comments

2reactions

Zodiasecommented, Jul 24, 2020

I’d like to also point out the other examples are also incorrect or out-dated.

Not only is this mal-formatted, styled now only uses component types inferred from the given component (see type definition linked below), which means this example would be:

import styled from 'styled-components';
import Header from './Header';

const Title = styled(Header)<{ isActive: boolean }>`
    color: ${props => (props.isActive ? props.theme.primaryColor : props.theme.secondaryColor)}
`;

The resulting Title component does have isActive in its props, as strange as the type argument placement may seem.

This one is also incorrect for the same reason. It should at least be:

import styled from 'styled-components';
import Header, { Props as HeaderProps } from './Header';

const Title = styled(
    ({ isActive, ...rest }: HeaderProps & { isActive: boolean }) => <Header {...rest} />
)`
    color: ${props => (props.isActive ? props.theme.primaryColor : props.theme.secondaryColor)}
`;

Type declaration of styled as of @types/styled-components@5.1.1: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/cbffb855b909c89f109b348bf9ca2dff98b70705/types/styled-components/index.d.ts#L298-L310 and https://github.com/DefinitelyTyped/DefinitelyTyped/blob/cbffb855b909c89f109b348bf9ca2dff98b70705/types/styled-components/ts3.7/index.d.ts#L263-L276

1reaction

ghybscommented, Feb 16, 2021

Hi,

Here is a new attempt at fixing those bad examples (after PR #483 which did not get merged): https://codesandbox.io/s/modest-surf-u9jtu?file=/src/index.tsx

It demo’es the examples as-is (when they are good enough for TypeScript syntax), proposed fixed versions, and also extra possibilities using transient props and shouldForwardProp.

I will try to make it a proper PR soon.

Top Results From Across the Web

How to define custom props in a react functional component ...

I just started a new react project with typescript and I'm having difficulty defining a custom prop in a functional component.

Typing React Props in TypeScript - DEV Community ‍ ‍

In the following, I will show you how to define custom props for a component in connection with already existing props like children...

Defining Props in React Function Component with Typescript

This guide will provide you with the syntax you need to properly define the props entering your components, compare and contrast defining ...

Using custom props with a Redux form in Typescript · GitHub

Here is another same solution using InjectedFormProps with withStyles in typescript. import { Field, reduxForm, } from 'redux-form/immutable'; ...

Useful Patterns by Use Case - React TypeScript Cheatsheets

Usecase: you want to make a <Button> that takes all the normal props of <button> ... -react-typescript-component-with-as-prop-able-to-render-any-valid-dom.