[SignInPage] Allow slotProps to override all labels

[bharatkashyap]

• Closes Unwanted "Email" label on the sign-in page when specifying slot props for the email field #4416
• Fixed codesandbox

[mnajdova]

What was the reason for not using the label prop on the TextField and rendering instead a different label component?

Also, when spreading the slotProps, make sure that the complex prop are being merged, like slotProps, className, style prop etc.

[bharatkashyap]

What was the reason for not using the label prop on the TextField and rendering instead a different label component?

Agree, no reason to be doing it this way.

Also, when spreading the slotProps, make sure that the complex prop are being merged, like slotProps, className, style prop etc.

Got it, I've updated to use a common function that can take care of merging props for all of the <TextField /> components in the page

[mnajdova]

Suggested change

	htmlInput: {
	sx: {
	paddingTop: theme.spacing(1),
	paddingBottom: theme.spacing(1),
	},
	...baseProps.slotProps?.htmlInput,
	},
	inputLabel: {
	sx: {
	lineHeight: theme.typography.pxToRem(12),
	fontSize: theme.typography.pxToRem(14),
	},
	...baseProps.slotProps?.inputLabel,
	},
	htmlInput: {
	...baseProps.slotProps?.htmlInput,
	sx: [
	{
	paddingTop: theme.spacing(1),
	paddingBottom: theme.spacing(1),
	},
	...(Array.isArray(baseProps.slotProps?.htmlInput?.sx) ? baseProps.slotProps?.htmlInput?.sx : [baseProps.slotProps?.htmlInput?.sx
	},
	inputLabel: {
	...baseProps.slotProps?.inputLabel,
	sx: [
	{
	lineHeight: theme.typography.pxToRem(12),
	fontSize: theme.typography.pxToRem(14),
	},
	...(Array.isArray(baseProps.slotProps?.inputLabel?.sx) ? baseProps.slotProps?.inputLabel?.sx : [baseProps.slotProps?.inputLabel?.sx
	],
	},
	},

You can extract the sx prop into variables so we don't repeat the expressions.

[mnajdova]

Left one last comment, the rest looks much better 👌

[mnajdova]

This looks like a red flag (making the logic depend on something related to the docs), unless I am misunderstanding the usage.

[bharatkashyap]

This was done to help render demos smoothly in the docs. It's used in two places, mostly to do with UI:

• Not setting autoFocus true if the component is being used in the docs
• Setting the loading state of the Credentials form to false even if the login is unsuccessful (also the case in the docs)

Agreed that it's not the cleanest way - I can make a note to remove these and tackle that in one of the upcoming releases 👍🏻