styled-components中Button组件className不匹配与high属性报错解决方案

一、解决非布尔属性high的警告 #

问题原因 #

high不属于<button>标签的原生合法属性，styled-components默认会将所有传入的自定义props透传到真实DOM元素上，React检测到给非原生属性传入布尔值时就会触发该警告。

解决方案 #

使用styled-components提供的瞬态Props（Transient Props），这类props以$为前缀，仅用于组件内部的样式计算，不会被透传到真实DOM。
修改后的代码示例：

1. 调整Button组件的样式计算逻辑，读取带$前缀的props：

import styled from 'styled-components';
const Button=styled.button`
border:none;
border-radius:10px;
padding:7px 10px;
font-size:12px;
background:${(props) => (props.$high ? 'red':'orange')};
color:white;
`

2. 使用组件时传递对应瞬态props：

Status:<Button $high={card.priority === "high"}>{ card.priority } Priority</Button>

二、解决className服务端/客户端不匹配的 hydration 警告 #

问题原因 #

你使用的是Next.js做服务端渲染（SSR/SSG），未做适配配置时，styled-components在服务端和客户端生成类名的随机逻辑不一致，导致服务端输出的HTML类名与客户端 hydration 时生成的类名不匹配，触发警告。

解决方案 #

• 安装适配依赖babel-plugin-styled-components，统一类名生成规则
• 在项目根目录的Babel配置文件（如.babelrc）中添加styled-components的SSR配置：

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}

• 在pages目录下新建自定义_document.js，实现服务端样式提取，保证 hydration 时样式一致：

import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
}

内容的提问来源于stack exchange，提问作者Beginner