Problems with suid/icons color after updating to @suid/material@0.13.2

[Bersaelor]

We just updated to @suid/material@0.13.2 and @suid/icons-material@0.6.6 and had the following problem:

For icons which we color like so:

            <PlaylistAddRoundedIcon sx={{ color: 'text.primary' }} />

they will still have the primary-text color (white) when run with npm run dev:

But after we solid-start build, the icons suddenly have a black color applied to them:

[juanrgm]

I can't reproduce the problem: https://stackblitz.com/edit/6zw3ga?file=src%2FApp.tsx

It works in dev and prod mode.

[Bersaelor]

Is it possible this is somehow related to SSR?

When deployed our app is half-way rendered on the server and then the client does some final adjustments. If it was caused by SSR, it would explain why we can also not replicate this on our own machines, only once we deploy it to the server.

Today, I was able to get our buttons color back after a single change in:

So it has to be caused by the combination of the latest suid version with rendering it in a node environment on the server.

[Bersaelor]

What's also weird is that our own codebase doesn't make any use of rgba(0, 0, 0 anywhere. So the extra color that was added after we deployed on the latest suid version, has to come somehow from the framework. And the screenshots also show that the black color with 87% alpha does not appear in npm run dev mode, so I'm having a hard time debugging what exactly causes this.

[juanrgm]

With SSR enabled the result is correct.

I suspect this commit as the cause but I can't recreate the issue.

You can override the commit If you revert these lines by this:

return $componentType() ? inProps.ownerState : undefined;

[juanrgm]

Something new?

[Bersaelor]

I updated to version 0.14.2 on monday and it seems to have worked now , thank you for your effort with suid @juanrgm !