how to pass style in div using typescript in react

Question

this is my code i just want to make a custom component in react with typescript like if i want to pass height, width, border Radius and style as extra parameter like if i want more css property then pass style={{display:flex}} but i can't add this with typescript i successfully write in js it works but not familiar with typescript

my interface

interface BoxProps {
 heights: React.CSSProperties;
 styles?: React.CSSProperties;
 className?: String;
 borderRadius?: React.CSSProperties
 children?: React.ReactElement<any>
}
const Box = ({ id, heights, styles, className, children }: BoxProps) => {
 const Nstyle = { ...styles,height: { heights } }
 return (
 <div
 {...id}
 style={Nstyle}
 className={CN} >
 {children}
 </div >
 );
}

please help style shows this error with typescript The expected type comes from property 'style' which is declared here on type'DetailedHTMLProps, HTMLDivElement>'`

• BARNOWL: try Nstyle as any
• Paul: What's the definition of the id prop? It's missing from BoxProps.

Answer 1

The prop heights needs to be string | number. The className prop used a capital S for String instead of string. className={CN} should be className={className} because the variable CN does not exist.

interface BoxProps {
 heights: string | number;
 styles?: React.CSSProperties;
 className?: string;
 borderRadius?: React.CSSProperties
 children?: React.ReactElement<any>
}
const Box = ({ heights, styles, className, children }: BoxProps) => {
 const Nstyle: React.CSSProperties = { ...styles, height: heights }
 return (
 <div
 style={Nstyle}
 className={className}
 >
 {children}
 </div >
 );
}