Passing sx prop to a custom component

Question

I have a component that I use as a layout component, and in nearly all cases it works just fine, however there are one or two places where I need to be able to adjust the styles, and I would like to be able to do this by simply passing the exact styles that I need instead of adding some custom prop that will toggle them on or off.

The component looks like this:

const BlockLayout: React.FC<IProps> = ({
  children,
  id,
  forceToBottom,
  sxProps, // <--- What I want to add
}) => {
  return (
    <Box
      id={id}
      sx={[
        {
          backgroundColor: (theme) => theme.palette.background.paper,
          mt: forceToBottom ? 'auto' : 1,
          borderRadius: 0.5,
          display: 'flex',
          border: '1px solid rgba(0, 0, 0, 0.1)',
          flexWrap: 'wrap-reverse',
        },
        sxProps, //<--- How I could use it? 
        (theme) => ({
          ...(theme.palette.mode === 'dark' && {
            border: `1px solid ${lighten(
              theme.palette.background.paper,
              0.15
            )}`,
          }),
        }),
      ]}
    >
      {children}
    </Box>
  )
}

How can this be done, and what type do the props need to have?

Answer 1

In the documentation they just cast the type to const.

You can add them as follows using the spread operator:

},
sxProps && ...sxProps,
(theme) => ({