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

What's the definition of the id prop? It's missing from BoxProps. — Paul
– Paul, Commented May 30, 2020 at 16:50

Paul · Accepted Answer · 2020-05-30 17:01:41Z

6

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

answered May 30, 2020 at 17:01

Paul

1,0227 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to pass style in div using typescript in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related