{"id":15700880,"url":"https://github.com/robintail/merge-sx","last_synced_at":"2025-04-30T14:43:01.238Z","repository":{"id":62805478,"uuid":"562294570","full_name":"RobinTail/merge-sx","owner":"RobinTail","description":"Combines multiple SxProps for Material UI components.","archived":false,"fork":false,"pushed_at":"2025-03-16T12:56:31.000Z","size":2797,"stargazers_count":11,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-25T18:46:53.693Z","etag":null,"topics":["combine","css-in-js","jss","material-ui","merge","merging","mui","muiv5","react","reactjs","strict","styled-components","styling","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/merge-sx","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RobinTail.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"RobinTail","buy_me_a_coffee":"robintail"}},"created_at":"2022-11-05T22:16:08.000Z","updated_at":"2025-03-24T11:48:09.000Z","dependencies_parsed_at":"2024-03-02T09:28:42.538Z","dependency_job_id":"fa4f97b0-75c8-4d7e-ac4f-e152857ce84c","html_url":"https://github.com/RobinTail/merge-sx","commit_stats":{"total_commits":146,"total_committers":3,"mean_commits":"48.666666666666664","dds":0.410958904109589,"last_synced_commit":"73a993cf5d1b80216395305e9234c626aa0538a7"},"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RobinTail%2Fmerge-sx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RobinTail%2Fmerge-sx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RobinTail%2Fmerge-sx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RobinTail%2Fmerge-sx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RobinTail","download_url":"https://codeload.github.com/RobinTail/merge-sx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246351019,"owners_count":20763232,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["combine","css-in-js","jss","material-ui","merge","merging","mui","muiv5","react","reactjs","strict","styled-components","styling","typescript"],"created_at":"2024-10-03T19:55:36.648Z","updated_at":"2025-03-31T15:30:50.723Z","avatar_url":"https://github.com/RobinTail.png","language":"TypeScript","funding_links":["https://github.com/sponsors/RobinTail","https://buymeacoffee.com/robintail"],"categories":[],"sub_categories":[],"readme":"# merge-sx\n\n[![Coverage Status](https://coveralls.io/repos/github/RobinTail/merge-sx/badge.svg?branch=master)](https://coveralls.io/github/RobinTail/merge-sx?branch=master)\n![NPM Downloads](https://img.shields.io/npm/dw/merge-sx)\n![NPM License](https://img.shields.io/npm/l/merge-sx)\n\nCombines multiple [`SxProps`](https://mui.com/system/getting-started/the-sx-prop)\nfor [Material UI](https://mui.com/) components.\n\n## Installation\n\n```shell\nnpm install merge-sx\n# or\nyarn add merge-sx\n```\n\n## Usage\n\nThe utility provides a very simple and semantically clean interface, that supports conditional and optional inclusions.\n\n```ts\nimport { mergeSx } from \"merge-sx\";\n\n// Merge your SxProps\nmergeSx(sx1, sx2 /*, ... */);\n// Merge optionally\nmergeSx(internalSx, props?.sx); // supports undefined\n// Merge conditionally\nmergeSx(commonSx, isMobile \u0026\u0026 mobileSx); // supports false\n```\n\n## Why might you need it\n\n\u003cabbr title=\"Material UI\"\u003eMUI\u003c/abbr\u003e 5 has introduced a new way of styling React components using a Theme-aware\n`sx` property. It can be necessary to create your own styled components while still allowing for additional styling\nby the consumer. In this case your component will have its own `sx` property, most likely optional. This makes it\nnecessary somehow to combine your own styles with the styles coming from the consumer of your component. One approach\nmight be using a styling wrapper, an alternative way to style your component with the\n[`styled()` utility](https://mui.com/system/styled/). Thus, you could apply the consumer's `sx` to the pre-styled\ncomponent. However, this approach can be inconvenient for several reasons.\n\nI came to conclusion that merging several `sx` properties is better. However, the `SxProps` has rather complex data\ntype. It can be an object with styling properties, can be function, can be `null`. It can be a challenge to perform\na merge under strict typing of Typescript.\n\n## How it works\n\nLuckily, starting version [5.1.0](https://github.com/mui/material-ui/releases/tag/v5.1.0) of MUI `SxProps`\n[can](https://github.com/mui/material-ui/blob/v5.1.0/packages/mui-system/src/styleFunctionSx/styleFunctionSx.d.ts#L60)\nalso be `array`. However, nested arrays are not allowed, so this utility does exactly the flat merge, also bringing\nsupport for conditional and optional inclusions, providing a very simple and semantically clean interface.\n\n## Performance\n\nThe utility has been tested to support up to 65535 arguments.\n\n![Performance chart](https://raw.githubusercontent.com/RobinTail/merge-sx/refs/heads/master/performance.svg)\n\n## Examples\n\n### Conditional merging\n\nThe utility supports `false`:\n\n```tsx\n\u003cButton sx={mergeSx(commonSx, isMobile \u0026\u0026 mobileSx)}\u003eClick me\u003c/Button\u003e\n```\n\n### Optional merging\n\nThe utility supports `undefined`:\n\n```tsx\ninterface MyButtonProps {\n  sx?: SxProps\u003cTheme\u003e; // optional prop for consumer\n}\n\nconst MyButton = ({ sx: consumerSx }: MyButtonProps) =\u003e (\n  \u003cButton sx={mergeSx(internalSx, consumerSx)}\u003eClick me\u003c/Button\u003e\n);\n```\n\n### Inline Theme supplying\n\nThe utility is generic and accepts the type argument.\n\n```ts\n// theme is Theme\nmergeSx\u003cTheme\u003e(sx1, (theme) =\u003e ({ mb: theme.spacing(1) }));\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobintail%2Fmerge-sx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobintail%2Fmerge-sx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobintail%2Fmerge-sx/lists"}