-
-
Notifications
You must be signed in to change notification settings - Fork 32.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Link] LinkProps missing component prop #29942
Comments
Is there a workaround for this? |
@plmwd A workaround is to cast the props: import { createTheme, LinkProps as MuiLinkProps } from '@mui/material'
import React from 'react'
import { Link, LinkProps } from 'react-router-dom'
export const colors = {
linkBlue: '#2C73FF',
}
const LinkBehavior = React.forwardRef<
any,
Omit<LinkProps, 'to'> & { href: LinkProps['to'] }
>((props, ref) => {
const { href, ...other } = props
// Map href (MUI) -> to (react-router)
return <Link ref={ref} to={href} {...other} />
})
LinkBehavior.displayName = 'LinkBehavior'
export const theme = createTheme({
components: {
MuiButtonBase: {
defaultProps: {
LinkComponent: LinkBehavior,
},
},
MuiLink: {
defaultProps: {
color: colors.linkBlue,
component: LinkBehavior,
} as MuiLinkProps, // https://github.com/mui/material-ui/issues/29942
},
},
} |
@geirsagberg I had to cast to LinkBaseProps to get the workaround to work, but thank you! |
This is great. Thank you @geirsagberg! |
I think this doesn't work for more components. We need to add a TS spec test and verify if this works for all components. Then we should either try to find a fix to the issues or document how it can be used. cc @mui/core |
The problem with overriding the Consider the following example: https://codesandbox.io/s/component-override-in-theme-qk0p5t?file=/src/Demo.tsx Even though Chip's component is set to const LinkChip = React.forwardRef(function LinkChip(props: ChipProps<"a">, ref: React.ForwardedRef<HTMLAnchorElement>) {
return <Chip {...props} ref={ref} component="a" />
}); |
Duplicates
Latest version
Current behavior 😯
The LinkProps type does not include a component field.
Expected behavior 🤔
The LinkProps type does include a component field.
Steps to reproduce 🕹
Following these docs, the example code throws an error:
the LinkProps type does not include a component field.
The ThemeOptions type is using LinkProps as the type for theme.components.MuiLink.defaultProps.
See this alternate example, typescript playground.
The alternate example shows that this issue also affects users who use Link as a root node (assuming props spread).
Context 🔦
Discovered while using react-router's Link component as MuiLink's default component, following these docs. A simplified approach to reproduce, try "a" or "div" as MuiLink's component prop value in createTheme.
A quick look at the material-ui source code:
This ThemeOptions type
uses this components type
which uses this props type
which uses this LinkProps type.
That LinkProps type doesn't appear to use OverridableComponent, which may be the issue. The Link type in the same file does.
Your environment 🌎
N/A
The text was updated successfully, but these errors were encountered: