CODEWITHSUNDEEP
reactjstypescript
Shaikh Muhammed Sajid Ali
Shaikh Muhammed Sajid Ali

Reputation: 131

how to pass style in div using typescript in react

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>'`

Upvotes: 4

Views: 13301

Answers (1)

Paul
Paul

Reputation: 1022

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 >
  );
}

Upvotes: 6

Related Questions