CODEWITHSUNDEEP
reactjsmaterial-ui
soliz
soliz

Reputation: 881

MUI v5: is there a performance difference between styling with system properties and sx prop?

The Migration from v4 to v5 guide indicates:

The Box system props have an optional alternative API in v5, using the sx prop. You can read this section for the "why" behind this new API.

<Box border="1px dashed grey" p={[2, 3, 4]} m={2}>
<Box sx={{ border: "1px dashed grey", p: [2, 3, 4], m: 2 }}>

The referred section indicates:

Having the system under one prop (sx) helps to differentiate props defined for the sole purpose of CSS utilities, vs. those for component business logic. It's important for the separation of concerns.

But when it comes to performances, do both ways fall under the benchmark item d. Render 1,000 Box in Performance tradeoff? Or is there any difference between using system properties and sx prop?

Upvotes: 7

Views: 2167

Answers (1)

NearHuscarl
NearHuscarl

Reputation: 81340

In practice, they should be the same, the system props in some components like Box or Typography will be captured and spread again in the sx prop (Source). So it'd look like this internally:

const { sx: originalSx, ...otherSystemProps } = props;
// sx and system props will be merged into mergedSx
const { ..., mergedSx } = extendSxProp({ originalSx, ...otherSystemProps });

return <BoxRoot sx={mergedSx} {...} />

This means both approach use sx prop under the hood (the slowest styling approach). The one using system properties may be a tad slower because it needs to be merged with the other sx prop internally but I don't think it's a big issue here (Both approaches should be equally slow).

Upvotes: 6

Related Questions