Can't apply sx prop

[trkohler]

Hi there!

I'm using Ghost for sourcing content for my blog.
Ghost send me an actual html as a response to graph ql query and I try to render it with div or section and apply styling with Theme UI but nothing works!

Here is the example of my trying:

<div
      sx={{ border: '1px solid', borderColor: 'primary', bg: 'background', color: 'primary'}}
      dangerouslySetInnerHTML={{ __html: post.html }}
      />

(doesn' work. styles are not applied)

<section
      sx={{ 
        p: {
          color: `primary`
        }
      }}
      dangerouslySetInnerHTML={{ __html: post.html }}
      />

doesn't work either, styles are not applied.

My MDX was styled and looked good, but I can't transfer my content to Ghost because styles are not applied to Ghost posts at all.

Appreciate any hints and help. Thanks to community in advance!

[hasparus]

What JSX pragma do you have configured? We have a function called jsx you can import from theme-ui or @theme-ui/core which handles that sx prop. You need some setup (e.g. /** @jsxImportSource theme-ui */ or Babel config) to make it run.

• https://theme-ui.com/guides/jsx-pragma#jsx-pragma
• https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-a-jsx-transform

[trkohler]

hi @hasparus

thank you for the response! I had already tried using pragma but had no success.
This is what I receive trying using it
importSource cannot be set when runtime is classic.

also i have a lot of other components where i don't use pragma and it works. Let me show you an example

/** @jsx jsx */
import { jsx } from "theme-ui"
import { Link } from "gatsby"
import Layout from "./layout"
import Title from "./title"
import useMinimalBlogConfig from "@lekoarts/gatsby-theme-minimal-blog/src/hooks/use-minimal-blog-config"
import replaceSlashes from "@lekoarts/gatsby-theme-minimal-blog/src/utils/replaceSlashes"
// @ts-ignore
import Hero from "../texts/hero"
// @ts-ignore
import SEO from "./seo"
import Listing from "./listing"

type PostsProps = {
    data: {
        posts: {
            nodes: {
                slug: string
                title: string
                excerpt: string
                timeToRead: number
                description: string
                tags: {
                    name: string
                    slug: string
                }[]
                date: string
            }[]
        }
    }
}

const Homepage = ({ data: { posts }}: PostsProps) => {
    const { basePath, blogPath } = useMinimalBlogConfig()
    const normalizedPosts = posts.nodes

    return (
        <Layout>
            <SEO
            isBlogPost={false}
            pageData={{
                title: "Знакомство"
            }}
            />
            <section sx={{ mb: [5, 6, 7], p: { fontSize: [1, 2, 3], mt: 2 } }}>
                <Hero />
            </section>
            <Title text="Последние посты">
                <Link to={replaceSlashes(`/${basePath}/${blogPath}`)}>Читать все</Link>
            </Title>
            <Listing posts={normalizedPosts} showTags={false} />
        </Layout>
    )
}

export default Homepage

all other components in my gatsby project works except this one, where i try to set sx prop on the section where I use dangerouslySetInnerHTML.

[trkohler]

As i correctly understand, my react version and babel config allow to use sx prop without theme-ui pragma.

[hasparus]

importSource cannot be set when runtime is classic.

This means you have your Babel setup configured to use "classic" JSX runtime.
So the pragma comment is @jsx jsx instead of @jsxImportSource jsx, what you can see at the top of the file you've sent :) The classic runtime is not "automatic" so you need to manually bring that jsx function to scope (take a look at your first import) in the file.

[trkohler]

thank you! you are right and everything works now 🍾