Headers(h1,h2..) are not properly displayed in dato plugin

In the custom plugin built with React, I return <h1> Hello </h1> to display header 1 text, but it is displayed like a paragraph, p.

hello @henok.tesfaye all the HTML inside the plugins is out of our control, so you might need to include some styling to make this work as you expect?

1 Like

@mat_jack1 I’m not sure why it is not displaying as expected. I didn’t do anything fancy. I use CRA as a boilerplate for my react app.

import React from 'react'

const App () => <h1> Hello </h1>

export default App

@mat_jack1 Got it, Thank you!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>DatoCMS UUID generator plugin</title>
    <link
      href="https://unpkg.com/datocms-plugins-sdk@0.0.9/dist/sdk.css"
      rel="stylesheet"
    />
  </head>

  <body>
    <script
      type="text/javascript"
      src="https://unpkg.com/datocms-plugins-sdk@0.0.9/dist/sdk.js"
    ></script>
  </body>
</html>

This was my index.html when i delete the link tag, https://unpkg.com/datocms-plugins-sdk@0.0.9/dist/sdk.css, h1 is properly displayed.

1 Like