Function extendSx

  • extendSx<SxExtendee, ExtConfig>(sx, config): SxExtendee extends Sx<infer Config>
        ? SxConfigMerge<Config, ExtConfig>
        : never

  • Type Parameters

    • SxExtendee
    • ExtConfig extends Partial<SxConfig<object>>

    Parameters

    Returns SxExtendee extends Sx<infer Config>
        ? SxConfigMerge<Config, ExtConfig>
        : never

    Description

    Extends a Sx function with new configuration

    Importing

    import {extendSx} from 'muitils'
    // or
    import {extendSx} from 'muitils/sx'



    Example

    const rootSx = createSx({
     classes: ['form', 'field'] as const,
     definitions:{
       w100: {width:'100%'},
       h100: {height:'100%'}
     } as const,
    })

    const sx = extendSx(rootSx,{
     classes: ['input'] as const,
     definitions:{
       input: {
         border: '1px solid red'
       }
     } as const,
    })

    const boxSx = sx({
      ...sx.def('w100','input'),
      [sx.$('& .field')]: {
        p: 2
      }
    })

    const form = (
     <Box sx={boxSx}>
       <TextField className={sx.classes.field}/>
     </Box>
    )

Settings

Member Visibility