#pasted text from suggestions has weird styles (like unwanted fonts, sizes, colors, etc.),

1 messages · Page 1 of 1 (latest)

modern flintBOT
#

Hi @robust jolt. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

This issue is related to styling problems in NextJS, particularly with pasted text. Based on the available knowledge sources, there are a few potential causes and solutions for this problem:

  1. CSS Duplication: There might be a duplication of CSS rules causing unexpected styling. This can happen depending on how you navigate to a page or if certain components are rendered before others. Github Issue: Duplication of CSS rules (https://github.com/vercel/next.js/issues/42082)

  2. Content Link Styling: If you're using Vercel's Content Link feature, the styling of editable fields might be incorrect. This can cause text to break out of its container. To fix this, you can split the encoded text from the original text using the @vercel/stega package. Vercel Guide: Troubleshooting Content Link (https://vercel.com/guides/troubleshooting-content-link#the-styling-of-the-editable-fields-is-incorrect)

  3. Manual CSS Tags: If you're manually adding CSS tags, this can negatively affect CSS resource loading. Instead, use Next.js' built-in CSS support, such as CSS Modules or importing styles in pages/_app.js. Next.js Docs: No CSS Tags (https://nextjs.org/docs/messages/no-css-tags)

  4. Font Issues: If you're using custom fonts, especially with next/font, make sure they are properly configured. Incorrect font configuration can lead to unexpected styling. Next.js Docs: Applying Font Styles (https://nextjs.org/docs/pages/api-reference/components/font#applying-styles)

To address these issues, you could try the following:

#
  1. Review your CSS implementation, ensuring you're using Next.js' built-in CSS support correctly.
  2. If using Content Link, implement the vercelStegaSplit function as described in the Vercel guide.
  3. Check your font configurations, especially if using next/font.
  4. Investigate if there's any CSS duplication in your project.

If the problem persists after trying these solutions, you may need to provide more specific details about your implementation for further troubleshooting.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: