无法在样式组件中使用 Button，这给了我错误

Question

I am using styled-components in js file.When I try to change button colour based on its content its giving me this error:

Warning: Prop `className` did not match. Server: "sc-pVTma fSTvVY" Client: "sc-bdvvaa vaKvs"
    at button
    at styled.button (http://localhost:3000/_next/static/chunks/pages/issues.js?ts=1617437771165:11202:19599)
    at div
    at Link (http://localhost:3000/_next/static/chunks/pages/issues.js?ts=1617437771165:1808:19)

react-dom.development.js:67 Warning: Received `false` for a non-boolean attribute `high`.

If you want to write it to the DOM, pass a string instead: high="false" or high={value.toString()}.

If you used to conditionally omit it with high={condition && value}, pass high={condition ? value : undefined} instead.

The code for the same is given below for reference":

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;
`
Status:<Button high={card.priority === "high"}>{ card.priority } Priority</Button>

Answer 1

This works fine for me. You can match this with your code for debugging.

import "./styles.css";
import styled from 'styled-components';
import {useState} from "react";

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

export default function App() {
  const [priority, setPriority] = useState("High");
  return (
    <div className="App">
      <Button high={priority === "High"}>{ priority } Priority</Button>
      <button onClick={() => setPriority("Low")}>Low Priority</button>
      <button onClick={() => setPriority("High")}>High Priority</button>
    </div>
  );
}