A simple utility for conditionally joining material ui sx props together.
npm install mui-sxmui-sx using your package manager
npm install mui-sx --save
`
OR
`
yarn add mui-sx
`
Import
`typescript
import sx from 'mui-sx';
`
Usage
#### Basic Sx
`typescript
const sxDisplayFlex = { display: 'flex' }
const sxDisplayTable = { display: 'table' }
const sxBordered = { border: '1px solid' }
sx(sxDisplayFlex) // => { display: 'flex' }
sx(sxDisplayFlex, sxBordered) // => { display: 'flex', border: '1px solid' }
sx(sxDisplayTable, sxBordered) // => { display: 'flex', border: '1px solid' }
`
#### Conditional Sx
`typescript
sx({ condition: false, sx: sxDisplayFlex }) // => {}
sx({ condition: true, sx: sxDisplayFlex }) // => { display: 'flex' }
`
#### Mixed
`typescript
sx(sxBordered, { condition: false, sx: sxDisplayFlex }) // => { border: '1px solid' }
sx(sxBordered, { condition: true, sx: sxDisplayFlex }) // => { border: '1px solid', display: 'flex' }
sx(sxBordered, sxDisplayFlex, { condition: true, sx: sxDisplayTable }) // => { border: '1px solid', display: 'table' }
``