小编Joy*_*boy的帖子

目前使用顺风并制作可重用的反应组件面临着这个问题，您可以将一些样式作为顺风类作为道具传递。实际的问题在于“pb-{number}”属性。我可以通过这种方式，并且会很好地工作。“border-{number}”属性也会发生这种情况，但不知何故它接受 border-2 和 border-4 （仅限这些）。

import './button.css'
    
    export default function Button({
        color = "orange",
        inset = "pb-3", <--- this will work
        border = "border-8",
        className, 
        onClick, 
        link
        , ...props}){
        
        return (
            <div onClick={onClick}
            className={`btn-${color} ${border} 
            ${className} ${inset}`}> <--- this will work
                
                <div>
                    {props.children}
                </div>
            </div>

但是，如果我尝试使其更清晰，那么不使用顺风的人只需传递一个值（如下例所示），它将无法工作。

import './button.css'

export default function Button({
    color = "orange",
    inset = "1", <--- this
    border = "4",
    className, 
    onClick, 
    link
    , ...props}){
    
    return (
        <div onClick={onClick}
        className={`btn-${color} border-${border} 
        ${className} pb-${inset}`}> <--- this wont work …