Invalid DOM property `classname`. Did you mean `className`?

[zidkim]

Inside NextjS env, the following returns an error:

      <Interweave
        allowAttributes={true}
        noWrap={true}
        content={`<div className="test">Test</div>`}
      />

Error: "Invalid DOM property classname. Did you mean className?"

EDIT: I realize now that although the rendered html includes the expected "class", the actual css does not get applied. The goal from my end is to insert large content with multiple classNames. These classNames would be defined outside Interweave component such as with styled-jsx, styled-components, or even with plain css/sass. Is this possible?

[milesj]

@madleo-dk Is this rendering on the server? If so, the SSR situation with Interweave isn't the best, but you should at least be doing: https://interweave.dev/docs/ssr

But yes, if you're supplying className, then those classes "need to exist" before hand on the client side.

[zidkim]

@milesj Ah, so if I understand correctly, it's essentially not possible to have styles/classes applied to html/jsx thats been "injected".

Appreciate the quick response btw.

[milesj]

@madleo-dk If you're referring to the content prop, then you would need to interpolate the class into the HTML string before it's rendered, or apply it after it's rendered by referencing an id attribute or something.

Do you have a demo somewhere so I can get a better understanding?

[zidkim]

@milesj The HTML string would be delivered from the database. So it would look more like,

      <Interweave
        allowAttributes={true}
        noWrap={true}
        content={`<div className="test">Test</div>`}
      />

The hope was that styles defined in styled-jsx would be applied as such.

return (
      <Interweave
        allowAttributes={true}
        noWrap={true}
        content={data.content}
      />

   <style jsx>{` 
       .test {
             width: 100%;
        }
  `}
)
`

[milesj]

@madleo-dk Ok the problem is that content expects HTML, not JSX. So you need to change className to class.

<Interweave
        allowAttributes={true}
        noWrap={true}
        content={`<div class="test">Test</div>`}
      />
``

[zidkim]

Does not work. HTML gets rendered, styles from style-jsx does not get applied.

    <>
      <Interweave
        allowAttributes={true}
        noWrap={true}
        content={`<div class="container">Test</div>`}
      />

      <style jsx>{`
        .container {
          font-size: 5rem;
          font-weight: 900;
        }
      `}</style>
    </>

[milesj]

@madleo-dk Is the class name that <style jsx> is injecting actually .container or it getting hashed?

This seems like a problem on that end, not Interweave's, as this just renders HTML.

[zidkim]

Yes, the class "container" gets applied. No worries at all, and appreciate the help.