ComponentProps

exercises/06.styling/02.problem.component/README.mdx

@@ -45,7 +45,7 @@ case), you'll want to borrow the type definition for that element from React.
 Here's how you do that (for a `span` element rather than `div`):
 
 ```tsx
-function MySpan(props: React.HTMLAttributes<HTMLSpanElement>) {
+function MySpan(props: React.ComponentProps<'span'>) {
 	return <span {...props} />
 }
 ```

exercises/06.styling/02.problem.component/index.tsx

@@ -5,7 +5,7 @@ import { createRoot } from 'react-dom/client'
 // 🐨 Also automatically add the fontStyle: 'italic' style to the style prop so consumers don't have to provide that
 // 🐨 And automatically add the "box" className to the className prop so consumers don't have to provide that as well.
 
-// 💯 as a bonus, have this accept any number of additional props (typed as React.HTMLAttributes<HTMLDivElement>)
+// 💯 as a bonus, have this accept any number of additional props (typed as React.ComponentProps<'div'>)
 // and apply those to the rendered div as well.
 
 // 🐨 update all of these to use the <Box> component with the appropriate props.

exercises/06.styling/02.solution.component/index.tsx

@@ -4,7 +4,7 @@ function Box({
 	style = {},
 	className = '',
 	...otherProps
-}: React.HTMLAttributes<HTMLDivElement>) {
+}: React.ComponentProps<'div'>) {
 	return (
 		<div
 			className={`box ${className}`}

exercises/06.styling/03.problem.size-prop/index.tsx

@@ -8,7 +8,7 @@ function Box({
 	// 🐨 add a size prop here
 	...otherProps // 🦺 union this with an object that has a size prop type here which is
 	// optional and one of "small", "medium", or "large"
-}: React.HTMLAttributes<HTMLDivElement>) {
+}: React.ComponentProps<'div'>) {
 	// 🐨 based on the size prop, define a new variable called sizeClassName
 	return (
 		<div

exercises/06.styling/03.solution.size-prop/index.tsx

@@ -5,7 +5,7 @@ function Box({
 	...otherProps
 }: {
 	size?: 'small' | 'medium' | 'large'
-} & React.HTMLAttributes<HTMLDivElement>) {
+} & React.ComponentProps<'div'>) {
 	const sizeClassName = size ? `box--${size}` : ''
 	return (
 		<div