Next.js 样式化jsx中的动态样式未按预期运行

我设置的变量（bgColor、txtColor）并不一致地进入样式化jsx。我附加了一个屏幕截图，您可以看到console.log显示的值与渲染的值不同

我相信关于样式化jsx有一些东西我没有得到。不知道为什么这不起作用

const Badge = (props) => {
  const { variation = null, size = null } = props;

  let bgColor = "#eeeeee";
  let txtColor = "#000000";
  switch (variation) {
    case "red":
      bgColor = "#FADBD8";
      txtColor = "red";
      break;
    case "green":
      bgColor = "#D5F5E3";
      txtColor = "green";
      break;
  }
  /* Test to see what our values are */
  console.log(`props.children=${props.children}, bgColor=${bgColor}, txtColor=${txtColor}`)
  return (
    <span className="badge">
      {props.children}

      {/* My colors and text in the CSS do not match the vars printed to cosole above */}
      <style jsx>{`
        .badge {
          text-transform: capitalize;
          display: inline-block;
          padding: 0.2rem 0.4rem;
          border-radius: 3px;
          background-color: ${bgColor};
          color: ${txtColor};  
        }

      `}</style>
    </span>
  );
};

const徽章=（道具）=>{
常量{variation=null，size=null}=props；
让bgColor=“#eeeeee”；
让txtColor=“#000000”；
开关（变化）{
案例“红色”：
bgColor=“#FADBD8”；
txtColor=“红色”；
打破
案例“绿色”：
bgColor=“#D5F5E3”；
txtColor=“绿色”；
打破
}
/*测试看看我们的价值观是什么*/
log（`props.children=${props.children}，bgColor=${bgColor}，txtColor=${txtColor}`）
返回(
{props.children}
{/*CSS中我的颜色和文本与上面打印到cosole的变量不匹配*/}
{`
.徽章{
文本转换：大写；
显示：内联块；
填充：0.2rem 0.4rem；
边界半径：3px；
背景色：${bgColor}；
颜色：${txtColor}；
}
`}
);
};

下面是一个组件渲染错误的示例。。。

更新 我们已经挖得更深了。看起来有时它会将生成的相同JSX样式分配给应该是不同颜色的项目。有没有想过为什么会把它分配到同一个班级？（见附件）

---

我猜服务器和客户端中的渲染样式不同步。您可以应用

useState

来解决此问题

const [bgColor, setBgColor] = useState('#eeeeee')

switch(variation) {
  case 'red':
    setBgColor('#FADBD8')
    break
  case 'green'
    setBgColor('#D5F5E3')
    break
}

---

如果我更新了代码，页面重新呈现，颜色和变量似乎是同步的，如果我只是刷新页面，事情就搞糟了。也许这有助于确定这里发生了什么？也许你应该使用

f12

检查其他样式是否重写了你的

jsx样式。其他样式不会重写它。将发布一个图像。它来自jsx类。我认为当页面重新呈现自己时，与硬刷新相比，有一些东西可以工作。客户端和服务器会不同步吗？这是我的第一个nextjs项目，已经和这个bug斗争了好几个小时了。当刷新时，我得到了这个错误。。。警告：文本内容不匹配。服务器：“低”客户端：“高”…有帮助吗？