patrick91 / styled-components-typescript-example

Sample "app" using typescript and styled components.

Styled components Typescript example

This is a simple example of using styled components with Typescript.

Original styles from Beautiful Web Type

How to run

yarn start

styled-components-typescript-example's Issues

Can we get an example of using Typescript with props other than theme?

For example the equivalent of something like this:

const SomeComponent = styled.div`
  visibility: ${props => props.visible ? 'visible' : 'hidden'};
  ${props => props.margin && `margin: ${props.margin}`};
`;

Invalid Section children type

Hi, I am getting the following error in the main.tsx file on the Section component:

Type '{ children: Element; }' is not assignable to type 'Readonly<ThemedOuterStyledProps<WithOptionalTheme<SectionProps, IThemeInterface>, IThemeInterface>>'.\n Types of property 'children' are incompatible.\n Type 'Element' is not assignable to type 'string | number | ReactElement<any> | undefined'.\n Type 'Element' is not assignable to type 'ReactElement<any>'.\n Types of property 'type' are incompatible.\n Type 'string | ComponentClass<any> | StatelessComponent<any>' is not assignable to type 'string | ComponentClass<any, any> | StatelessComponent<any>'.\n Type 'ComponentClass<any>' is not assignable to type 'string | ComponentClass<any, any> | StatelessComponent<any>'.\n Type 'ComponentClass<any>' is not assignable to type 'StatelessComponent<any>'.\n Types of property 'propTypes' are incompatible.\n Type 'React.ValidationMap<any> | undefined' is not assignable to type 'import(\"c:/Git/Styled-Components-Typescript-Example/node_modules/@types/prop-types/index\").ValidationMap<any> | undefined'.\n Type 'React.ValidationMap<any>' is not assignable to type 'import(\"c:/Git/Styled-Components-Typescript-Example/node_modules/@types/prop-types/index\").ValidationMap<any>'.\n Index signatures are incompatible.\n Type '((object: any, key: string, componentName: string, ...rest: any[]) => Error | null) | undefined' is not assignable to type 'Validator<any>'.\n Type 'undefined' is not assignable to type 'Validator<any>'.

The children type of the Section component does not seem to match the expected React.ReactChild type. How come the styled function does not return a ReactChild element?

Any help would be greatly appreciate. Thanks.

Update dependencies

Update Babel config for successfully run

Hello, thank you for work!

But last version of code doesn't run, probably, you need update .babelrc like that

{ "presets": [
    ["es2015", {"modules": false }]
  ]
}

Current configuration is worked

Missing babel presets

The latest released version seems to be missing some dependencies related to the babel presets.
In order to make it work I had to change the .babelrc file to

{
    "presets": [
        "babel-preset-env",
        "react"
     ]
}

And also install the babel-preset-react package.
I think it is related to the parcel-bundler version.

Can we get an example of using extends with TS?

Something like this:

const VisibilityComponent = styled.div`
  visibility: ${props => props.visible ? 'visible' : 'hidden'};
`;

const MarginedVisibilityComponent = VisibilityComponent.extends`
  ${props => props.margin && `margin: ${props.margin}`};
`;

problem with using className propery

Following the example, I am trying to add a disabled attribute to an svg element.

interface SvgWrapperProps extends React.SVGProps {disabled: boolean; className?: string; children: React.ReactChild }
const SvgWrapper: React.StatelessComponent = props => (

{props.children}

);

let SvgIcon = styled(SvgWrapper) `
height: 100%;
width: 100%;
.... // and so on

Unfortunately, the className attribute is seen by TS as being of an incompatible type, and is suggesting the type I use should be:

className: string | number | React.ReactElement | (string & number) | (string & true) | (string & false) | (string & {}) | (string & React.ReactElement) | (string & (string | number | boolean | any[] | React.ReactElement)[]) | (number & string) | (number & true) | (number & false) | (number & {}) | (number & React.ReactElement) | (number & (string | number | boolean | any[] | React.ReactElement)[]) | (React.ReactElement & string) | (React.ReactElement & number) | (React.ReactElement & true) | (React.ReactElement & false) | (React.ReactElement & (string | number | boolean | any[] | React.ReactElement)[])

To paraphrase the wonderful John McEnroe: "Surely, you cannot be serious!!!"

Is there a better way?
thanks.

TSLint throws error with this example here: https://www.styled-components.com/docs/api#typescript

Hi,

I'm trying to get styled-components to work with TypeScript but I'm facing some issues.
I've followed this example here: https://www.styled-components.com/docs/api#typescript

In this code:

import ThemeInterface from './theme';

const {
  default: styled,
  css,
  injectGlobal,
  keyframes,
  ThemeProvider,
} = styledComponents as ThemedStyledComponentsModule<ThemeInterface>;

export { css, injectGlobal, keyframes, ThemeProvider };
export default styled;

Typescript is throwing the following error:

   TS2352: Type 'typeof "/Users/xxxx/xxxxx/React/TypeScriptWithReact/node_modules/styled-components/t...' cannot be converted to type 'ThemedStyledComponentsModule<ThemeInterface>'.
  Types of property 'ThemeProvider' are incompatible.
    Type 'ComponentClass<ThemeProviderProps<object>>' is not comparable to type 'ComponentClass<ThemeProviderProps<ThemeInterface>>'.
      Type 'ThemeProviderProps<object>' is not comparable to type 'ThemeProviderProps<ThemeInterface>'.
        Type 'object' is not comparable to type 'ThemeInterface'.
          Property 'primaryColor' is missing in type '{}'.

My theme.ts file looks like this:

export default interface ThemeInterface {
  primaryColor: string;
  primaryColorInverted: string;
}

Also, I'd like to know if I need to import styled from this file styled-components.ts or do I need to still import styled from 'styled-components' from node-modules?

Any help would be appreciated.
Thank you

Add typescript-styled-plugin