TypeScript, get prop types for meshStandardMaterial

[ChrisCrossCrash]

I'd like to replace the any in BoxProps for the appropriate type for meshStandardMaterial. How can I get that type?

type BoxProps = {
  // TODO: Replace this `any` with the prop type for `meshStandardMaterial`
  materialProps?: any
}

const Box = ({ props }: BoxProps) => (
  <mesh>
    <boxBufferGeometry />
    <meshStandardMaterial {...props.materialProps} />
  </mesh>
)

// This should trigger type hinting and not cause any typescript errors:
const BlueBox = () => <Box materialProps={{ color: 'blue' }} />

[ChrisCrossCrash]

I figured this out while writing the question, but I thought I'd still ask and answer for people having the same question. Maybe someone else has a better solution?

I used JSX.IntrinsicElements['meshStandardMaterial']:

type BoxProps = {
  materialProps?: JSX.IntrinsicElements['meshStandardMaterial']
}

const Box = (props: BoxProps) => (
  <mesh>
    <boxBufferGeometry />
    <meshStandardMaterial {...props.materialProps} />
  </mesh>
)

// This should trigger type hinting and not cause any typescript errors:
const BlueBox = () => <Box materialProps={{ color: 'blue' }} />

EDIT: POSSIBLY BETTER SOLUTION

vinayakvivek offered the solution (below) of using MeshStandardMaterialProps. Unlike JSX.IntrinsicElements['meshStandardMaterial'], it needs to be imported from @react-three/fiber. However, I assume it's a more appropriate type since it was exported from R3F for this exact purpose.

[vinayakvivek]

Can't we import MeshStandardMaterialProps directly?

import { Canvas, MeshStandardMaterialProps } from '@react-three/fiber'

[ChrisCrossCrash]

@vinayakvivek I don't know how I missed that 🤦‍♂️. I probably forgot the Mesh part and I was trying StandardMaterialProps. Thanks for the help!

[CodyJasonBennett]

The result is the same (you'll see mixed usages in Drei) as R3F writes these props into JSX intrinsicelements.