Skip to content

RaLink has an incorrect description of StyledMuiLink #10904

@kod-v

Description

@kod-v

What you were expecting:

I want to add styles to the theme for my project.

import { type RaThemeOptions } from 'react-admin';

export const raComponentsThemeOptions: RaThemeOptions = {
  components: {
    RaLink: {
      styleOverrides: {
        root: ({ theme }: { theme: Theme }) => ({
          '& > .MuiChip-colorDefault': {
            color: (theme.vars || theme).palette.primary.main,
          },
        }),
      },
    },
  },
}

What happened instead:

The new styles did not apply

Steps to reproduce:

Related code:

https://github.com/marmelab/react-admin/blob/v5.10.2/packages/ra-ui-materialui/src/Link.tsx#L40
There's a confusion with the brackets. It should be like this:

const StyledMuiLink = styled(MuiLink, {
  name: PREFIX,
  overridesResolver: (props, styles) => styles.root,
})(({ theme }) => ({
  // empty
})) as typeof MuiLink; // @see https://mui.com/material-ui/guides/typescript/#complications-with-the-component-prop

Other information:

Environment

  • React-admin version: 5.10.2
  • Last version that did not exhibit the issue (if applicable):
  • React version: 19.1.1
  • Browser:
  • Stack trace (in case of a JS error):

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions