cssinjs/jss

Jss-plugin-template & Typescript - Can't type the style root

Open

#1,407 opened on Oct 11, 2020

View on GitHub
 (1 comment) (0 reactions) (0 assignees)JavaScript (434 forks)batch import
help wantedtypescript

Repository metrics

Stars
 (7,000 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

Expected behavior: I think that I have to code the following types that the error gives in the root tag:

Describe the bug:

No overload matches this call.
  Overload 1 of 2, '(style: Styles<Theme, {}, "root">, options?: Pick<WithStylesOptions<Theme>, "flip" | "element" | "defaultTheme" | "name" | "media" | "meta" | "index" | "link" | "generateId" | "classNamePrefix">): (props?: any) => Record<...>', gave the following error.
  Type 'string' is not assignable to type 'CSSProperties | CreateCSSProperties<{}> | PropsFunc<{}, CreateCSSProperties<{}>>'

The problem is that I just don't know how to do it, never typed anything like this before in other projects. Can you explain it to me, please? You can find the code here:

Codesandbox link: https://codesandbox.io/s/github/pedroRelvas/HowToTypeTheStyleRoot (You can find the error on the file demo.tsx).

Versions (please complete the following information): -jss: "^10.4.0", -jss-plugin-template: "^10.4.0",

  • Browser [e.g. chrome, safari]: Chrome - 86.0.4240.75 (Compilação oficial) (64 bits)
  • OS [e.g. Windows, macOS]: Windows 10 Feel free to add any additional versions which you may think are relevant to the bug.

Contributor guide

Research direction
This issue asks for guidance on typing the root style object when using jss plugin template with TypeScript. The error indicates a type mismatch. A contributor should examine the TypeScript definitions for jss and jss plugin template, specifically the `Styles` type and the `createUseStyles` function. The provided codesandbox (https://codesandbox.io/s/github/pedroRelvas/HowToTypeTheStyleRoot) contains a reproduction. The solution likely involves using the correct generic parameters or providing explicit type annotations. The response should include a clear code example and update the documentation if necessary.
Tech stack
typescriptjavascript
Domain
frontenddeveloper experience
Issue type
Documentation
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Mostly clear
Prerequisites
TypeScript basicsCSS in JS with JSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
35