fix: add material parameters to SegmentsProps (#1708)

README.md

@@ -2468,7 +2468,7 @@ type Props = {
   /** Event callback when each frame changes */
   onFrame?: Function
   /** @deprecated Control when the animation runs*/
-  play?: boolean 
+  play?: boolean
   /** Control when the animation pauses */
   pause?: boolean
   /** Whether or not the Sprite should flip sides on the x-axis */
@@ -3234,7 +3234,12 @@ A wrapper around [THREE.LineSegments](https://threejs.org/docs/#api/en/objects/L
 ##### Prop based:
 
 ```jsx
-<Segments limit={1000} lineWidth={1.0}>
+<Segments
+  limit={1000}
+  lineWidth={1.0}
+  // All THREE.LineMaterial props are valid
+  {...materialProps}
+>
   <Segment start={[0, 0, 0]} end={[0, 10, 0]} color="red" />
   <Segment start={[0, 0, 0]} end={[0, 10, 10]} color={[1, 0, 1]} />
 </Segments>

src/core/Segments.tsx

@@ -2,10 +2,10 @@ import * as THREE from 'three'
 import * as React from 'react'
 import mergeRefs from 'react-merge-refs'
 import { extend, useFrame, ReactThreeFiber } from '@react-three/fiber'
-import { Line2, LineSegmentsGeometry, LineMaterial } from 'three-stdlib'
+import { Line2, LineSegmentsGeometry, LineMaterial, LineMaterialParameters } from 'three-stdlib'
 import { ForwardRefComponent } from '../helpers/ts-utils'
 
-type SegmentsProps = {
+type SegmentsProps = LineMaterialParameters & {
   limit?: number
   lineWidth?: number
   children: React.ReactNode