Solid Styled JSX + Typescript

[danielpza]

I found that I need extra types for typescript to play nice with styled-jsx on solid. Using the style tag make typescript throw an error: Property 'jsx' does not exist on type 'StyleHTMLAttributes<HTMLStyleElement>'. [2322]

I manage to make the errors go away with similar to this issue in styled-jsx:

declare global {
  namespace JSX {
    interface StyleHTMLAttributes<T extends HTMLStyleElement> {
      jsx?: boolean;
      global?: boolean;
    }
  }
}

It would be convenient to put it on the readme or make a package out of it under @types/solid-styled-jsx.

[ryansolid]

Thanks for reporting. I will see what I can do update the types.

[littlepoolshark]

How can solve this problem? Some one helps?

[ryansolid]

You should just be able to import it: https://github.com/ryansolid/solid/tree/master/packages/solid-styled-jsx#typescript
Let me know if this doesn't work.

[littlepoolshark]

@ryansolid , it seems like still not work.

[littlepoolshark]

I just run yarn add solid-styled-jsx --dev and put the import statement import "solid-styled-jsx"; in the top of the root file, and add the plugin config to the wepack.config.js. TS compiler still throw that error to me.

[ryansolid]

Hmm.. It should be extending the global namespace. I wonder if it is not finding it or the global extension is not working. Can you try writing that declaration in file?

declare global {
  namespace JSX {
    interface StyleHTMLAttributes<T> {
      jsx?: boolean;
      global?: boolean;
      dynamic?: boolean;
    }
  }
}

As far as I know this mechanism should work (same for adding custom elements etc). But let's isolate whether it's the "solution" or the module/build system.