Почему между элементами в рендеринге Reactmark есть чрезмерное расстояние? ⇐ CSS

[Anonymous]

Я использую next.js 15 с Tailwind CSS V3 и пакет React-markdown для визуализации вывода чата AI внутри компонента. s Использование классов Taillide, чтобы избежать проблем с расстоянием между типографией по умолчанию. Я попытался удалить все маржиново-бледные и добавить MB-0 , MT-0 и т. Д., Но интервал сохраняется. src = "https://i.sstatic.net/z1vk4nj5.png"/>

Что я использую:

• next.js 15
  
  . 19
• Reactmarkdown React-markdown@9
• Tailwind CSS v3
• плагины:
  

  Код: Выделить всё

  remark-gfm

• Код: Выделить всё

  rehype-highlight< /code> < /li>
  < /ul>
  < /li>
  < /ul>
  
   ✅ Ожидаемый результат: < /h3>
  Минимальный вертикальный расстояние между элементами в чате. Нежелательные пробелы, которые не разрушаются. (
  
  ),
  h2: ({ node, ...props }) => (
  
  ),
  h3: ({ node, ...props }) => (
  
  ),
  p: ({ node, ...props }) => (
  
  ),
  ul: ({ node, ...props }) => (
  
  ),
  li: ({ node, ...props }) => (
  
  ),
  code: ({ node, ...props }) => (
  
  ),
  pre: ({ node, ...props }) => (
  
  )
  }}
  >
  {msg.text}
  
  
  
   🧪 пробовал до сих пор: 
  
   Заменить все заголовки на  
  [*] rueing margins с mb-0 , mt-0 
  в Tailwind < /li>
   Проверка компьютерных стилей-без неожиданного края < /li>
  < /ul>
  
   💬 Вопрос: < /h3>
  
   infements eleactment Вертикальные разрывы между пользовательскими компонентами заголовка и их следующими братьями и сестрами? PrettyPrint-Override ">
  
  useMemo

  and

  Код: Выделить всё

  useCallback

  are both hooks provided by
  React to optimize performance by memoizing values or functions. Let's break down the differences
  and when to use each:
  
  useMemo
  
  Purpose:

  Код: Выделить всё

  useMemo

  is
  used to memoize a computed value.
  
  Syntax:
  class="bg-orange my-2 overflow-x-auto rounded p-2"
  >

  Код: Выделить всё

  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
  

  When to Use:
  
  
  Expensive Calculations: Use

  Код: Выделить всё

  useMemo

  when you have a calculation
  that is computationally expensive and you want to avoid recalculating it on every render
  unless its dependencies change.
• Derived State: When deriving state from props or state that requires some
  computation.

Подробнее здесь: https://stackoverflow.com/questions/795 ... -rendering