Next 14 我的自定义笔画文本组件出现水合失败错误

Question

我最近开始使用 Next 14 构建一个应用程序，在我的应用程序中，我需要一些带有笔画的文本。不幸的是，CSS 笔划无法按照我想要的方式工作，因为它的作用类似于内部笔划，因此我创建了一个自定义组件，该组件使用笔划将文本覆盖在同一文本上，从而使笔划看起来像是外部笔划而不是内部笔划内部中风。

我遇到的问题是我遇到了这个水合错误：

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.
See more info here: https://nextjs.org/docs/messages/react-hydration-error

In HTML, <p> cannot be a descendant of <p>.
This will cause a hydration error.


...
  <StrokeText>
    <p>
    ^^^
      <p>

而且我不知道如何解决它。我什至不知道从哪里开始。

这是组件：

import React from 'react';

import styles from './styles.module.css';

type StrokeTextType = {
  fontSize: string;
  color: string;
  strokeSize: string;
  strokeColor: string;
  text: string;
  align?: 'left' | 'center' | 'right';
  fontWeight?: number | string;
  margin?: string;
  fontFamily?: string;
  children?: React.ReactElement;
};

const StrokeText = ({
  fontSize,
  color,
  strokeSize,
  strokeColor,
  text,
  align,
  fontWeight,
  margin,
  fontFamily,
  children,
}: StrokeTextType) => {
  return (
    <p
      className={styles.text}
      title={text}
      style={
        {
          color,
          fontSize,
          fontWeight,
          fontFamily,
          margin,
          textAlign: align,
          '--stroke-size': strokeSize,
          '--stroke-color': strokeColor,
        } as React.CSSProperties
      }
    >
      {children ? children : text}
    </p>
  );
};

export default StrokeText;

这就是我使用它的方式：

            <StrokeText
              text='Ok, you win, but it was close'
              color='white'
              fontSize={isMobile ? '15px' : '20px'}
              strokeSize='5px'
              strokeColor='black'
              fontWeight={400}
              align='center'
              margin={isMobile ? '0 0 10px 0' : '0'}
            >
              <p>
                Ok, you win,{' '}
                <span style={{ color: '#FFCC00' }}>but</span> it was close.
              </p>
            </StrokeText>

Answer 1

这是因为您的包装器组件

StrokeText

将其子组件包装在

p

标签内，该标签是

block

元素，并且它可以包含

inline

元素而不是另一个

block

元素

要修复

Hydration

错误，您可以使用 `div