How to custom a component in v9

[tienlx97]

Example I want custom Checkbox style. Here is example:

import { CheckboxProps, Checkbox, makeStyles } from '@fluentui/react-components'
import React from 'react'

export default function SLCheckbox({ label, ...props }: CheckboxProps) {
  // eslint-disable-next-line @typescript-eslint/no-use-before-define
  const classes = useStyles()
  return (
    <Checkbox
      {...props}
      indicator={{
        className: classes.large,
      }}
      label={{
        className: classes.label,
        ...label, // Error here
      }}
      size="large"
    />
  )
}

const useStyles = makeStyles({
  large: {
    width: '24px',
    height: '24px',
  },

  label: {
    paddingLeft: '0px',
  },
})

Why the label error, I don't know why ?

[spmonahan]

I believe the error you are seeing is because spread for generic types (label is a generic) is not yet supported in Typescript (1, 2).

Even if you tried a cast or switched to Object.assign rather than spread you'll still run into issues since label is a slot it may also be a string or null or undefined so you'll have to handle all those possibilities as well.

One way to handle this is to recompose the checkbox: https://codesandbox.io/s/label-customization-j3dqpg