Styled components with props

[morganbarrett]

So I've been trying to get styled components to work with props and have come up empty handed.

It seems possible in MUI v5, but I'm not sure which version of MUI, SUID is based off.

I saw issue #144 where it was noted that this was not possible with MUI, but I have found a couple of instances on the docs where it has been done.

For example, on the official MUI docs:

const MyStyledButton = styled('button')((props) => ({
  backgroundColor: props.myBackgroundColor,
}));

Although this does not work in SUID, so the question is, is SUID running of an older version of MUI and if so, can it be updated to include this feature?

[juanrgm]

Could you locate in which version of MUI that improvement was introduced?

[morganbarrett]

I actually found I was just importing "styled" from the wrong location. If I import it from @suid/material it worked as expected.

However TypeScript didn't like it, so this was my workaround:

import type {ParentProps} from "solid-js";

export const fromProps = 
    <Props extends object>() =>
        (props: Props & ParentProps) =>
            <div {...props} />;

and used like so:

import {styled} from "@suid/material";
import {fromProps} from "./fromProps";

const StyledDiv = styled(fromProps<{someProp: number}>())(({props}) => ({
     width: props.someProp + "px"
}));

It would be handy if this worked without the helper though.