How to remove default inline styles from page?

Visual Editor Help
1

Builder content link

Builder public api key
cfbe5775ce0844259e210bbffef43bda

What are you trying to accomplish
Builder seems to be applying some default styles to the .builder-component element and I can’t figure out why or how to remove them. This is only happening for some pages.

Screenshots or video link

image
image836×310 34.8 KB

Code stack you are integrating Builder with
NextJS/React

Reproducible code example
n/a

2

Digging more here we’ve discovered that this issue is isolated to unpublished content.

3

Hi there,

Thank you for reaching out to support!

Builder adds default styles for the purpose of making building out elements easier for our customers, however, some prefer to build it out themselves. For this, we have a setting, if you go into Settings > Advanced settings > Editor, you can toggle off the Use default styles.

4

One thing strange we’ve noticed is that on your unpublished pages, it’s flashing 404 error before the previewed unpublished content is loaded. I would take a look inside your code file to see what is firing which is causing the 404 component to load (and hence the 404 CSS is being injected inline). Loom | Free Screen & Video Recording Software | Loom

If you’d like, please send us the code file and we can also take a look at your file to see how it looks!

5

My understanding is that the ‘Use default styles’ setting is a global setting. I wouldn’t expect my pages to differ in behavior here when changing a global setting. Is my understanding correct that the setting is global and not scoped to page models?

6

This is a fun one! The injected styles are coming from Next’s default error page. https://github.dev/vercel/next.js/blob/422b3b01a744999408aa101d1e153e002f97495c/packages/next/src/client/components/error.tsx#L4-L15

Presumably React is reusing the div instead of replacing with the clean Builder component. I’ll go ahead and explore adding key=“something-unique” to try and resolve. Thanks for digging!

Any insight into why we’re seeing a 404 for preview unpublished in the first place? Here is our component render:

return (
    <div>
      {router.isFallback ? (
        <div
          css={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            marginTop: '5rem',
          }}
        >
          <LogoLoader />
        </div>
      ) : page || Builder.isEditing || Builder.isPreviewing ? (
        <BuilderComponent model={MODEL_NAME} content={page} />
      ) : (
        <>
          <Head>
            <meta name="robots" content="noindex" />
          </Head>
          <DefaultErrorPage statusCode={404} />
        </>
      )}
    </div>
  );
7

Hmm, it could be because of the conditionals being set within your render.

Here’s an example of the component render on my end, where I have the conditionals outside of the render

export default function Page({ page }) {
  const router = useRouter();
  /*
    This flag indicates if you are viewing the page in the Builder editor.
  */
  const isPreviewing = useIsPreviewing();

  if (router.isFallback) {
    return <h1>Loading...</h1>;
  }

  /*
    Add your error page here. This will happen if there are no matching
    content entries published in Builder.
  */
  if (!page && !isPreviewing) {
    return <DefaultErrorPage statusCode={404} />;
  }

  return (
    <>
      <Head>
        {/* Add any relevant SEO metadata or open graph tags here */}
        <title>{page?.data.title}</title>
        <meta name="description" content={page?.data.descripton} />
      </Head>
      <div style={{ padding: 50, textAlign: 'center' }}>
        {/* Put your header or main layout here */}
        Your header 88asdf
      </div>

      {/* Render the Builder page */}
      <BuilderComponent model="page" content={page} />

      <div style={{ padding: 50, textAlign: 'center' }}>
        {/* Put your footer or main layout here */}
        Your footer
      </div>
    </>
  );
}