Why inline styles returns [object Object] in React JSX?-CodePudding

I am trying to set a inline css styles with a state check, but it returns [object Object], how to make it work? I am new to React and do not really understand this return.

      <section
        className="header__banner"
        styles={scrolltop > height ? { marginBottom: `${margin}px` } : ""}
        ref={refHeaderBanner}
      >

Expect(e.g.): styles="margin-bottom: 100px"

Current: styles=[object Object]

CodePudding user response：

HTML elements don't have a styles prop, so it gets converted to an expando-attribute which is a string (and which is ignored by everything except some hypothetical other JS you might write).

The prop you are looking for is style (singular) which does take an object as its value.

CodePudding user response：

styles={{scrolltop > height ? marginBottom: ${margin}px : ""}} try this.

CodePudding user response：

it's return an object because you worte the style between curly brackets, you need to write the style in this way

<section
      className="header__banner"
      styles={scrolltop > height ? `margin-bottom: ${margin}px` : ""}
      ref={refHeaderBanner}
>