RobinTail
merge-sx
Combines multiple SxProps
for Material UI components.
Installation
npm install merge-sx
# or
yarn add merge-sxUsage
The utility provides a very simple and semantically clean interface, that supports conditional and optional inclusions.
import { mergeSx } from "merge-sx";
// Merge your SxProps
mergeSx(sx1, sx2 /*, ... */);
// Merge optionally
mergeSx(internalSx, props?.sx); // supports undefined
// Merge conditionally
mergeSx(commonSx, isMobile && mobileSx); // supports falseWhy might you need it
MUI 5 has introduced a new way of styling React components using a Theme-aware
sx property. It can be necessary to create your own styled components while still allowing for additional styling
by the consumer. In this case your component will have its own sx property, most likely optional. This makes it
necessary somehow to combine your own styles with the styles coming from the consumer of your component. One approach
might be using a styling wrapper, an alternative way to style your component with the
styled() utility. Thus, you could apply the consumer's sx to the pre-styled
component. However, this approach can be inconvenient for several reasons.
I came to conclusion that merging several sx properties is better. However, the SxProps has rather complex data
type. It can be an object with styling properties, can be function, can be null. It can be a challenge to perform
a merge under strict typing of Typescript.
How it works
Luckily, starting version 5.1.0 of MUI SxProps
can
also be array. However, nested arrays are not allowed, so this utility does exactly the flat merge, also bringing
support for conditional and optional inclusions, providing a very simple and semantically clean interface.
Performance
The utility has been tested to support up to 65535 arguments.
Examples
Conditional merging
The utility supports false:
<Button sx={mergeSx(commonSx, isMobile && mobileSx)}>Click me</Button>Optional merging
The utility supports undefined:
interface MyButtonProps {
sx?: SxProps<Theme>; // optional prop for consumer
}
const MyButton = ({ sx: consumerSx }: MyButtonProps) => (
<Button sx={mergeSx(internalSx, consumerSx)}>Click me</Button>
);Inline Theme supplying
The utility is generic and accepts the type argument.
// theme is Theme
mergeSx<Theme>(sx1, (theme) => ({ mb: theme.spacing(1) }));