reactjs - hur man skickar stil i div med Typescript i React

det här är min kod jag vill bara skapa en anpassad komponent i React med TypeScript, som om jag vill skicka höjd, bredd, border radius och stil som extra parametrar, till exempel om jag vill ha fler CSS-egenskaper då skickar jag style={{display:flex}}, men jag kan inte lägga till detta med TypeScript, jag skrev det framgångsrikt i JS det fungerar men jag är inte bekant med TypeScript

mitt gränssnitt

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

vänligen hjälp stil visar detta fel med TypeScript Den förväntade typen kommer från egenskapen 'style' som är deklarerad här på typ'DetailedHTMLProps, HTMLDivElement>'`

Svar #1

Prop'en heights behöver vara string | number. Prop'en className använde ett stort S för String istället för string. className={CN} borde vara className={className} eftersom variabeln CN inte finns.

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

Relaterade artiklar