No Auto-completions / Suggestions for Custom `styled` components!

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Steps:

1. Created a custom component using styled utility.
2. Added variants using createTheme function.

Current behavior 😯

I was trying to compose a Flex component for all the flexbox related layouts in my application.

I had a look at the documentation, and it worked.

However, the developer experience isn't great, and I'm not getting any auto-completions in my VS Code for this custom component, neither in my component nor in the Custom Component section of createTheme() block.

Here's my implementation.

Component.

import { styled } from "@mui/material";

const Flex = styled("div", {
  shouldForwardProp: (prop) =>
    prop !== "direction" && prop !== "justifyContent" && prop !== "sx",
  name: "Flex",
  slot: "Root",
  overridesResolver: (props, styles) => [
    styles.root,
    props.direction === "column" && styles.directionColumn,
    props.justifyContent === "space-between" && styles.spaceBetween,
  ],
})({
  display: "flex",
});

export default Flex;

Variants

  components: {
    // No auto-completions/suggestions here  ☹️
    Flex: {
      styleOverrides: {
        root: {
          flexDirection: "row",
        },
        directionColumn: {
          flexDirection: "column",
        },
        spaceBetween: {
          justifyContent: "space-between",
        },
      },
    },
  },

While using it, I'm not getting the prop autocompletion on direction or justifyContent props.

Expected behavior 🤔

All my props should be well typed and should show suggestions just like other MUI components.

Context 🔦

No response

Your environment 🌎

 System:
    OS: Linux 5.10 Ubuntu 20.04.5 LTS (Focal Fossa)
  Binaries:
    Node: 16.17.1 - ~/.nvm/versions/node/v16.17.1/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.1/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @emotion/react: ^11.10.4 => 11.10.4
    @emotion/styled: ^11.10.4 => 11.10.4
    @mui/base:  5.0.0-alpha.101
    @mui/core-downloads-tracker:  5.10.9
    @mui/material: ^5.10.9 => 5.10.9
    @mui/private-theming:  5.10.9
    @mui/styled-engine:  5.10.8
    @mui/system:  5.10.9
    @mui/types:  7.2.0
    @mui/utils:  5.10.9
    @types/react: ^18.0.17 => 18.0.21
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0

Start with the @mui/material styled utility and the custom Flex component shown in the issue, then trace how createTheme handles the Flex entry under components. Compare the available typing and editor behavior for custom styled components with built-in MUI components. Done means direction and justifyContent are typed and suggested both on Flex and in the theme configuration.