No Auto-completions / Suggestions for Custom styled components!

[vipindigiqt]

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 🌎

npx @mui/envinfo

 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

[siriwatknp]

I think we missed documentation on this.

Also, I am not sure if we allow developers to extend their custom components from the default theme. It is possible. Take @mui/lab as an example of augmenting the theme.components.