[React] Remove string index fallback for CSS properties

[pelotom]

Resolves #24568.

With csstype 2.2, the property list should hopefully be complete enough that we can remove the string index from CSSProperties.

Please fill in this template.

• Use a meaningful title for the pull request. Include the name of the package modified.
• Test the change in your own code. (Compile and run.)
• Add or edit tests to reflect the change. (Run with npm test.)
• Follow the advice from the readme.
• Avoid common mistakes.
• Run npm run lint package-name (or tsc if no tslint.json is present).

Select one of these and delete the others:

If changing an existing definition:

• Provide a URL to documentation or source code which provides context for the suggested changes: <>
• Increase the version number in the header if appropriate.
• If you are making substantial changes, consider adding a tslint.json containing { "extends": "dtslint/dt.json" }.

[typescript-bot]

@pelotom Thank you for submitting this PR!

🔔 @asvetliakov @johnnyreilly @bbenezech @pzavolinsky @digiguru @ericanderson @morcerf @tkrotoff @DovydasNavickas @onigoetz @theruther4d @guilhermehubner @JoshuaKGoldberg @jrakotoharisoa @flaub @alelode @UJosue10 @dawnmist @Ogglas @santiagodoldan @brmenchl @snerks @Havret - please review this PR in the next few days. Be sure to explicitly select Approve or Request Changes in the GitHub UI so I know what's going on.

If no reviewer appears after a week, a DefinitelyTyped maintainer will review the PR instead.

[typescript-bot]

@pelotom The Travis CI build failed! Please review the logs for more information. Once you've pushed the fixes, the build will automatically re-run. Thanks!

[johnnyreilly]

Thanks!

[frenic]

@johnnyreilly React supports CSS Custom Properties. What's our thoughts on this? Should we recommend module augmentation?

[pelotom]

@frenic Good catch, I didn't know about that feature. Module augmentation seems like the right approach...

[pelotom]

As a lightweight (if not type safe) alternative, you can always do this of course:

<div style={{ ['--my-variable' as any]: 'red' }}>
  ...
</div>

[abelino]

We've also lost ability to use pseudo types. csstype exports a union of supported pseudos but seems like its not included in StyleRules. Is this intended?

https://github.com/frenic/csstype#pseudo-types

[pelotom]

@abelino inline styles can't use pseudo types...

[frenic]

We've also lost ability to use pseudo types.

@abelino what @pelotom said with React inline styles OOTB. But if the types for a third party library relies on the index signature some how it could likely cause some problems.

@frenic Good catch, I didn't know about that feature. Module augmentation seems like the right approach...

@pelotom We should add a comment about that. I'll fix it.

[pelotom]

@abelino re. @-rules, if you’re using Material UI that should be fixed by mui/material-ui#11007

[abelino]

@pelotom thanks for that!!!