[RFC] Renaming of `styleProps` in components

• I have searched the issues of this repository and believe that this is not a duplicate.

Background 🖼

Unstyled components have “slots” - components that can be overridden by the developer when creating a styled version of the component. Components in these slots must be aware of the internal state of the host component. Currently this is achieved with the help of the styleProps prop. It is passed to every slot component. It contains the host component’s props merged with its internal state (so, for example, in case of a SwitchUnstyled, styleProps.checked will reflect the real state of the Switch, not its checked prop.

Demo showing the use of styleProps in an unstyled component: https://codesandbox.io/s/styleprops-usage-forked-9mqmn?file=/src/Demo.tsx

import * as React from "react";
import { SwitchUnstyled, SwitchState } from "@material-ui/unstyled";

interface RootProps {
  styleProps: SwitchState;
  children: React.ReactNode;
}

function CustomSwitchRoot(props: RootProps) {
  const { styleProps, children, ...other } = props;
  const style = {
    backgroundColor: "red"
  };

  // The styleProps object is injected to CustomSwitchRoot by SwitchUnstyled.
  // It can be used to customize the slot component based on SwitchUnstyled's
  // state.
  if (styleProps.checked) {
    style.backgroundColor = "green";
  }

  return (
    <span style={style} {...other}>
      {children}
    </span>
  );
}

export default function Demo() {
  return <SwitchUnstyled component={CustomSwitchRoot} />;
}

Summary 💡

In order to reduce confusion, I propose to rename the styleProps to hostState or componentState.

Another option, suggested by @eps1lon in https://github.com/mui-org/material-ui/issues/25925#issuecomment-829059202 is to remove the styleProps entirely and just spread its contents onto the slot components directly.

Motivation 🔦

The discussion started in https://github.com/mui-org/material-ui/pull/26688/files/ee37264909d547c0cf35a7a5e64f87a89e190428#r659221608.

I find the styleProps name not adequate to what they are. First, these are not just props - it’s both the host props and its internal state merged together. Secondly, even though we presume these values will be used almost exclusively for styling the slot components, in my opinion we should name things according to what they are, not what what we think they will be used for.

My main motivation is my own confusion after seeing these for the first time. Before digging deeper I was under impression these was a subset of props responsible for styling.

[michaldudak]

We’ve got few options on the table. Let’s vote and decide:

• 👀 styleProps
• 🎉 ownerState
• 🚀 ownerProps
• ❤ $
• 👍 owner

As for the last one - it may feel awkward at first, as it could suggest it’s a reference to the owner component, but IMO expressions like owner.disabled, owner.onClick look quite well and are not ambiguous.

You may vote for all options that you like.

[mnajdova]

Just a note, when we do the change, there are some use-cases where some additional props needs to be passed to some slots that are not necessarily ownerState, for example passing markActive to the Mark component in the Slider - https://github.com/mui-org/material-ui/blob/next/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js#L691

This is one use-cases I can think of immediately (MarkLabel also accepts the same prop). I propse we pass these props directly and add them to the shouldForwardProp option.