Typings for custom components

[martinpengellyphillips]

I'm creating a custom component, but pass through some props (e.g. sx or a system prop) to the top level component I'm using (e.g. Box).

const MyComponent:??? = (props) => {
  const [local, boxProps] = splitProps(...) 
  return <Box {...boxProps}/>
} 

What is the recommended way to type my component and props? Is there a helper for this that I can use or should I explicitly type out props like sx as part of my interface?

[juanrgm]

import { Box } from '@suid/material';
import { BoxProps } from '@suid/material/Box/BoxProps';
import { splitProps } from 'solid-js';

const boxProps = ['sx', 'children', 'margin'] as const;

function MyBox(
  inProps: Pick<BoxProps, typeof boxProps[number]> & {
    subchildren?: string;
  }
) {
  const [boxProps, props] = splitProps(inProps, boxProps);
  return (
    <>
      <Box {...boxProps} />
      {props.subchildren}
    </>
  );
}

export default function App() {
  return (
    <MyBox subchildren="test" margin={3} sx={{ color: 'red' }}>
      hello world
    </MyBox>
  );
}

or

import { Box } from '@suid/material';
import { JSXElement } from 'solid-js';

function MyBox(props: {
  children: JSXElement;
  subchildren?: JSXElement;
  class?: string;
}) {
  return (
    <>
      <div class={props.class}>{props.children}</div> {props.subchildren}
    </>
  );
}

export default function App() {
  return (
    <Box component={MyBox} subchildren="test" margin={3} sx={{ color: 'red' }}>
      hello world
    </Box>
  );
}

[martinpengellyphillips]

Nice! Thank you.