Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[system] `component` prop lost when wrapping with `styled`

See original GitHub issue

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Current behavior 😯

I discovered this while trying to override component for a styled ListSubheader in our app. I tried it for ListItem as well but not others - it seems that when wrapping a component with styled, the component prop is lost and TS errors out.

Expected behavior 🤔

component prop is not lost

Steps to reproduce 🕹

See codesandbox

Context 🔦

No response

Your environment 🌎

No response

Issue Analytics

State:
Created 2 years ago
Reactions:8
Comments:6 (2 by maintainers)

Top GitHub Comments

5reactions

wight554commented, Apr 4, 2022

Can confirm this issue still exists in 5.4.4 Can be fixed this way, but it’s definitely a bug:

export const SvgIcon = styled(MuiSvgIcon)<SvgIconProps & { component: ElementType }>(({ theme }) => ({
  marginRight: theme.spacing(0.5),
}));

0reactions

GuilleDFcommented, Feb 16, 2022

Not sure if this helps narrow down the problem, but it seems that React.ComponentProps doesn’t report the component prop for MUI components. From what I can see, styled uses React.ComponentProps internally.

import React from 'react';
import { SvgIcon } from '@mui/material';

type Props = React.ComponentProps<typeof SvgIcon>;
type IsComponentInProps = 'component' extends keyof Props ? true : false; // This should be `true`, but it's `false`

Top Results From Across the Web

[system] component prop lost when wrapping with styled #29875

I discovered this while trying to override component for a styled ListSubheader in our app. I tried it for ListItem as well but...

Styled component not wrapping another styled component

I have a Popup component like so: import React, { useEffect } from 'react'; import styled from 'styled-components'; const Div = styled. div` ......

Advanced Usage - styled-components

Theming. styled-components has full theming support by exporting a <ThemeProvider> wrapper component. This component provides a theme to all React components ...

Wrapping a MUI component with styled ... - YouTrack

Wrapping a MUI component with styled-components breaks autocomplete for props ... Use autocompletion for the MUI component to get the alignContent prop and ......

Text - React Native

The style inheritance is only encoded inside of the native Text component and doesn't leak to other components or the system itself. Reference....