next.js：道具`className`不匹配

Question

我有一个像这样的动态组件：

const Wrapper = !!href ? StyledLink : styled.div``;

基本上，这会根据是否存在href呈现div或a标签。但是，当我使用它时，会出现此错误：

index.js:1 Warning: Prop `className` did not match. Server: "VacancyCard__StyledButtonLink-e2u68a-15 VacancyCard__withStyledLinkStyling-e2u68a-13 eZoUHM" Client: "VacancyCard__StyledButtonLink-e2u68a-15 VacancyCard-e2u68a-13 jVvzXy"
    in span (created by Context.Consumer)
    in StyledComponent (created by VacancyCard)
    in VacancyCard (at VacancyCard.js:215)
    in div (created by Context.Consumer)
    in StyledComponent (created by VacancyCard__StyledVacancyBottom)
    in VacancyCard__StyledVacancyBottom (at VacancyCard.js:203)
    in a (created by Context.Consumer)
    in StyledComponent (created by VacancyCard)
    in VacancyCard (at VacancyCard.js:190)
    in div (created by Context.Consumer)
    in StyledComponent (created by VacancyCard__StyledVacancy)
    in VacancyCard__StyledVacancy (at VacancyCard.js:189)
    in VacancyCard (at vacatures.js:45)
    in div (created by RevealBase)
    in RevealBase (created by Fade)
    in Fade (at vacatures.js:44)
    in div (created by Context.Consumer)
    in StyledComponent (created by Container__StyledContainer)
    in Container__StyledContainer (at Container.js:11)
    in Container (at vacatures.js:39)
    in div (created by Context.Consumer)
    in StyledComponent (created by Page__StyledPage)
    in Page__StyledPage (at Page.js:8)
    in Page (at vacatures.js:31)
    in VacancyOverview (at _app.js:10)
    in App
    in Container (created by AppContainer)
    in AppContainer

这样导入：

const VacancyCard = dynamic(() => import("../organisms/VacancyCard"), {ssr: false}) ;

解决了警告，但我想知道为什么这是个问题。