<Card /> Component rounded corners during SSR not working.

[muchisx]

Summary

Hi,

I noticed that the rounded corners are resolved like this:

polaris/polaris-react/src/components/Card/Card.tsx

Lines 42 to 50 in 70bfcbe

	const breakpoints = useBreakpoints();
	const defaultBorderRadius: BorderRadiusAliasOrScale = '300';
	const hasBorderRadius = Boolean(breakpoints[`${roundedAbove}Up`]);
	return (
	<WithinContentContext.Provider value>
	<ShadowBevel
	boxShadow="100"
	borderRadius={hasBorderRadius ? defaultBorderRadius : '0'}

This poses a problem for people that always want rounded corners as the default is always 0 during SSR

During SSR, namely Remix, breakpoints are not available, thus yieldien a false value for

const hasBorderRadius = Boolean(breakpoints[`${roundedAbove}Up`]); 

Can we have a way to set rounded corners via non-browser-dependant props so during SSR it doesn't look all square before hydration?

Expected behavior

I should be able to define the rounded corners from in an SSR way

Actual behavior

It always looks like this 1-2s.. while is hydrating

Steps to reproduce

tried to set up remix on codesanbox but couldn't set node version necessary for this version of polaris...

Are you using React components?

Yes

Polaris version number

13.9.1

Browser

Chrome

Device

Windows 11 PC

[omarcv07]

I have the same issue, is this going to be resolved?