styled API is removing TS definition from components

[rishavpandey43]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:

1. Open https://codesandbox.io/s/serverless-field-hkw82y?file=/src/App.tsx and wait for the application to load
2. Or you can open the live app by clicking on https://codesandbox.io/s/serverless-field-hkw82y?file=/src/App.tsx and see the image.
3. Check the codebase, for the typescript error

Current behavior 😯

I'm styling my component with the styled API provided by Mui and it results in errors in using some of the props like component. If the component is styled by styled API, and props like component="p" is used it's not being recognised by TS and throws an error in the IDE. But as per functionality, it works fine.

---

Styled Typescript -

const StyledTypography = styled(Typography)({
  color: "inherit"
});

<Typography variant="h6" component="p"> // no error while using component props
Inside Text
</Typography>

<StyledTypography variant="h6" component="p"> // error while using component props
Inside Text
</StyledTypography>

Expected behavior 🤔

Even though any components are styled using styled API their type definition should not behave differently than the actual one.

Below is the screenshot error, I'm getting in my actual file.

You can also check out for live preview - https://hkw82y.csb.app/

Context 🔦

I was creating a Design System and wanted some pre-defined props to be passed after styling the components, like Typography, Button, etc. But whenever I style the components, it loses the TS definition and results in a TS error even though it's correct.

No matter if any component is being styled or not, none of the TS definitions should be lost.

Your environment 🌎

`npx @mui/envinfo`

System:
    OS: macOS 13.3.1
  Binaries:
    Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm
  Browsers:
    Chrome: 114.0.5735.198
    Edge: Not Found
    Firefox: Not Found
    Safari: 16.4
  npmPackages:
    @emotion/react: ^11.10.5 => 11.10.5 
    @emotion/styled: ^11.10.5 => 11.10.5 
    @mui/base:  5.0.0-alpha.116 
    @mui/core-downloads-tracker:  5.11.7 
    @mui/icons-material: ^5.11.0 => 5.11.0 
    @mui/lab: ^5.0.0-alpha.79 => 5.0.0-alpha.87 
    @mui/material: ^5.11.7 => 5.11.7 
    @mui/private-theming:  5.8.4 
    @mui/styled-engine:  5.8.0 
    @mui/system:  5.8.5 
    @mui/types:  7.2.3 
    @mui/utils:  5.8.4 
    @mui/x-date-pickers: ^6.9.0 => 6.9.1 
    @types/react:  18.0.14 
    react: ^18.1.0 => 18.2.0 
    react-dom: ^18.1.0 => 18.2.0 
    typescript: ^4.7.3 => 4.7.4

tconfig configuration

{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"declaration": true,
"declarationDir": "types",
"sourceMap": false,
"outDir": "dist",
"strict": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"emitDeclarationOnly": true,
"jsx": "react-jsx",
"baseUrl": "src",
"lib": ["ES2021", "dom"],
"rootDir": "src"
},
"include": ["src"],
"exclude": [
"src//*.spec.ts",
"src//.stories.tsx",
"src/**/.cy.tsx",
"src/theme/"
]
}

[mj12albert]

@rishavpandey43 Thanks for reporting this ~ I can reproduce your issue, is there a specific reason you want to use styled() instead of other styling methods though?

If you are building a design system, the recommended method to do "global" (or design-system-wide) styling is in the theme using style overrides: https://mui.com/material-ui/customization/theme-components/#theme-style-overrides

It's also the recommended way to set default props, e.g. globally change all your h6s to p: https://mui.com/material-ui/react-typography/#changing-the-semantic-element

[mj12albert]

Duplicate of #37551

[rishavpandey43]

@mj12albert

I cannot change all h6 to p, because this is not what I want. Also, global config can't be done. As I don't want all typography components to inherit this new styling. Only create a new one for specific usage.

I want to create a TruncatedText component, which will truncate the text passed to it.
Also, want to style with the caption variant, but it will return a span tag that does not inherit width/maxWidth properties. So, I need to explicitly say to use the p tag with caption styling. But I do not want to globally override this.

And this is a basic usage, If someone wants to create a wrapper kind of component but does not want to make the global changes these issues should not come. It's a basic usage while working with any UI libraries. There should be flexibility to work, everyone does not have the same needs/requirements. I hope you understand my point here.

Can you suggest any workaround in my case here? I've got the same issue with other components like Button. Any help would be greatly appreciated.

Below is the component I created -

import { useState } from 'react';
import Tooltip from '@mui/material/Tooltip';
import { Typography, TypographyProps, TooltipProps } from '@mui/material';
import { styled } from '@mui/material/styles';

const TruncatedTextTypography = styled(Typography)({
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  width: 'inherit',
  whiteSpace: 'nowrap',
  color: 'inherit',
});

export interface TruncatedTextProps extends TypographyProps {
  /**
   * Text to truncate
   */
  text: React.ReactNode;
  /**
   * if `true`, displays tooltip
   * @default 'false'
   */
  tooltip?: boolean;
  /**
   * Tooltip Props to override, if required.
   */
  TooltipProps?: TooltipProps;
  /**
   * The max-width of text for truncating it.
   * @default 'inherit'
   */
  maxWidth?: TypographyProps['maxWidth'];
}

const TruncatedText = ({
  text,
  tooltip,
  TooltipProps,
  ...rest
}: TruncatedTextProps) => {
  const [isEllipsisActive, setIsEllipsisActive] = useState(false);

  function onMouseOverHandler(e: any) {
    setIsEllipsisActive(e.target?.offsetWidth < e.target?.scrollWidth);
  }
  function onMouseOutHandler() {
    setIsEllipsisActive(false);
  }

  return tooltip ? (
    <Tooltip
      title={text}
      placement="top"
      open={isEllipsisActive}
      {...TooltipProps}
    >
      <TruncatedTextTypography
        {...rest}
        onMouseOver={onMouseOverHandler}
        onMouseOut={onMouseOutHandler}
        component="p"
      >
        {text}
      </TruncatedTextTypography>
    </Tooltip>
  ) : (
    <TruncatedTextTypography component="p" {...rest}>
      {text}
    </TruncatedTextTypography>
  );
};

TruncatedText.defaultProps = {
  tooltip: true,
};

export default TruncatedText;