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

[pedroRelvas]

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.

[pedroRelvas]

@HenriBeck teaches here how to do it. https://github.com/cssinjs/jss/issues/806#issuecomment-410175913

Simple as this:

const useStyles = makeStyles({
  root: `
    background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
    border-radius: 3px;
    font-size: 16px;
    border: 0;
    color: white;
    height: 48px;
    padding: 0 30px;
    box-shadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
  ` as CSSProperties | CreateCSSProperties<{}> | PropsFunc<{}, CreateCSSProperties<{}>>,
});