[styled] Convert implicit styleProps to explicit

[mnajdova]

BREAKING CHANGE

A wildcard styleProps is no longer being added by default by experimentalStyled(). You need to specify them by yourself, as any other props:

-const StyledComponent = styled('div')(({ styleProps }) => ({ ... });
+const StyledComponent = styled('div')<{ styleProps: { completed?: boolean } }>(({ styleProps }) => ({ ... });

Closes #26410

[mui-pr-bot]

Details of bundle changes (experimental)

Generated by 🚫 dangerJS against 4bbf83c

[oliviertassinari]

@mnajdova How about adding new TypeScript tests based on the reproductions provided by Sebastian in #26410?

[mnajdova]

@mnajdova How about adding new TypeScript tests based on the reproductions provided by Sebastian in #26410?

What exactly should we test. We removed these props from the native typings, so they behave as any other props. Testing whether they can be optional or not doesn't make sense to me. Can you point out to specific test case that makes sense?

[oliviertassinari]

I was thinking of something in this order, to complement the existing tests. I'm not sure if it really makes a difference.

diff --git a/packages/material-ui/src/styles/experimentalStyled.spec.tsx b/packages/material-ui/src/styles/experimentalStyled.spec.tsx
index 84fc2756f3..1ded15d117 100644
--- a/packages/material-ui/src/styles/experimentalStyled.spec.tsx
+++ b/packages/material-ui/src/styles/experimentalStyled.spec.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { experimentalStyled as styled } from '@material-ui/core/styles';

 const Box = styled('div')(({ theme }) => ({
   color: theme.palette.primary.main,
@@ -26,3 +27,21 @@ const StyledToolbar = styled('div')(({ theme }) => ({
 const StyledSpan = styled('span')(({ theme }) => ({
   ...theme.typography.body1,
 }));
+
+const WithProps = styled('span')<{ styleProps: { foo: string } }>(({ styleProps }) => {
+  return { color: styleProps.foo };
+});
+
+<WithProps styleProps={{ foo: 'bar' }} />;
+
+// @ts-expect-error styleProps doesn't exist
+const MissingOption = styled('span')(({ styleProps }) => {
+  return { height: 1 };
+});
+
+const MissingProperty = styled('span')<{ styleProps: { inner: boolean } }>(({ styleProps }) => {
+  return { height: 1 };
+});
+
+// @ts-expect-error missing inner property
+<MissingProperty styleProps={{}} />;

[mnajdova]

I was thinking of something in this order, to complement the existing tests. I'm not sure if it really makes a difference.

I don't think it will bring much value, as it is nothing specific to the styled() util. The styleProps is now treated as any other arbitrary prop. The tests you've provided can be applied to any other prop, not sure it's worth adding it

[oliviertassinari]

@mnajdova Yeah, my point is that we don't have a test for this TypeScript first argument to add new props (it's not specific to stylesProps prop). Right now, we implicitly have this test with the demos of the docs. Which is maybe enough.