React中如何将含状态变量的模板字面量作为组件prop传递

你的模板字符串里多写了一层多余的单引号，导致最终传给border属性的字符串格式非法。
你原来的写法在borderColor为black时，实际拼接出来的值是 '1px solid' black——字符串里自带了包裹1px solid的单引号，和你硬编码时传入的无多余引号的1px solid black格式完全不同，自然无法被CSS识别生效。

直接删掉模板字符串里多余的单引号即可：

<Button border={`1px solid ${borderColor}`} />

当状态变量borderColor为black时，这段代码拼接出的属性值就是1px solid black，和你验证过有效的硬编码传值格式完全一致，样式可以正常渲染。

你当前把Button组件的border属性类型定义为string过于宽泛，无法在编译阶段拦截格式错误的传值。可以替换为React内置的CSS属性类型做更严格的约束，从源头避免这类格式错误：

interface ButtonProps {
  border?: React.CSSProperties['border']
  // 其余组件属性定义
}

改完类型后，如果传的border值格式不符合CSS规范，TypeScript会直接抛出类型错误，不用等到运行时才排查样式问题。

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