Styled-components-website: Typescript using custom props

[markatk]

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)}
`;

[Zodiase]

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/[email protected]:
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

[wispamulet]

This section confused me as well 🙄

I'm using styled-components with react-native-web and trying to create something like <h1/>, <h2/> in browser, and also with some custom props like bold or uppercase, here is my approach,

import React from 'react';
import { Text } from 'react-native';
import styled from 'styled-components/native';

type HeadlineProps = {
  uppercase?: boolean;
};

type ParaProps = {
  bold?: boolean;
};

type filteredProps = HeadlineProps & ParaProps;

/*
  Without this filtered component, the browser renders elements with proper styles as I expect,
  but it leaves an error in console says,

      `Received `true` for a non-boolean attribute `bold`.
      If you want to write it to the DOM, pass a string instead: bold="true" or bold={value.toString()}.
        in div (created by Text)
        in Text (created by Context.Consumer)
        ...`

  In my opinion, due to react-native-web's default behavior,
  it was trying to pass these custom props to html elements which are non-standard in browser
*/
const filteredText: React.FC<filteredProps> = ({
  bold,
  uppercase,
  ...rest
}) => <Text {...rest} />;

const Headline = styled(filteredText).attrs({ accessibilityRole: 'heading' })<
  HeadlineProps
>`
  font-weight: bold;
  text-transform: ${({ uppercase }) => (uppercase ? 'uppercase' : 'none')};
`;

export const H1 = styled(Headline)`
  font-size: 3.2rem;
`;

export const H2 = styled(Headline).attrs({ 'aria-level': 2 })`
  font-size: 2.4rem;
`;

export const P = styled(filteredText)<ParaProps>`
  font-size: 1.6rem;
  font-weight: ${props => (props.bold ? 'bold' : 'initial')};
`;

[kokushkin]

This is how I tried to solve it (without loosing the typing)
https://codesandbox.io/s/styledcomponents-typescript-customprops-cu15k

[ghybs]

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.

[davilima6]

@markatk, @Zodiase, @ghybs: could you please check if #774 looks OK? I basically just used the info you provided! Glad to amend (in this PR if broken/needed, or potentially in another if an improvement)

https://styled-compone-git-fork-davilima6-fix-ts-examples-styled-da4e07.vercel.app/docs/api#using-custom-props