Add support for transient props with the styled API?

Summary 💡

Our team is using MUI / typescript / styled, and we’d like to write styles as display: flex;, not JS display: "flex",, so we’ve opted to use MUI’s experimentalStyled, but we’re seeing some errors with custom props and our solution is getting ugly. I believe it would be solved by transient props.

Motivation 🔦

When we want to use custom props like so:

const MarqueeItems = styled(Box)<{ animate: boolean }>(
  ({ theme, animate }) => css`
    animation: ${animate ? "marquee 10s linear infinite" : "none"};
    margin-bottom: ${theme.spacing(2)};
  `
);

<MarqueeItems animate={isMobile} />

They work great, but props like animate get passed through to the DOM and cause errors.

We’ve been able to fix this by wrapping our components like so:

const MarqueeItems = styled(
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  ({ animate, ...rest }: { animate: boolean } & BoxProps) => <Box {...rest} />
)(
  ({ theme, animate }) => css`
    animation: ${animate ? "marquee 10s linear infinite" : "none"};
    margin-bottom: ${theme.spacing(2)};
  `
);

<MarqueeItems animate={isMobile} />

But this is getting pretty ugly.

Examples 🌈

Styled came up with a solution to this problem via transient props in styled 5.1, but they don’t seem to be working in MUI.

I’m pretty sure it would look something like this:

const MarqueeItems = styled(Box)<{ $animate: boolean }>(
  ({ theme, $animate }) => css`
    animation: ${$animate ? "marquee 10s linear infinite" : "none"};
    margin-bottom: ${theme.spacing(2)};
  `
);

<MarqueeItems $animate={isMobile} />

Alternatively I’m open to a better, existing way to do this without transient props. 😄

[oliviertassinari]

@eps1lon Agree, I have added the “waiting for upvotes”.

The alternative answer could be to say to the developers: swap the engine to use styled-components, you will get this $ behavior.

Proof that this workaround is working: https://codesandbox.io/s/styled-components-forked-wu7ol?file=/src/demo.js

import * as React from "react";
import { styled } from "@material-ui/core/styles";

const StyledDiv = styled("div")`
  color: ${(props) => props.$color};
`;

export default function StyledComponents() {
  return <StyledDiv $color="green">Transiant color prop</StyledDiv>;
}

[nathanlambert]

Currently I’m just using a util:

import { CreateStyled } from "@emotion/styled";

export const withTransientProps: Parameters<CreateStyled>[1] = {
  shouldForwardProp: (propName: string) => !propName.startsWith("$"),
};

and then doing this:

const SomeComponent = styled(
  "div",
  withTransientProps
)<{ $disabled: boolean; $textColor: string }>(
  ({ theme, $disabled, $textColor }) => css`
    margin: ${theme.spacing(1)};
    color: ${$textColor};
    :hover {
      background-color: ${$disabled
        ? theme.palette.grey[600]
        : theme.palette.background.paper};
    }
  `
);

<SomeComponent $textColor="#808" $disabled />

May not be beautiful, but it works.