React中Styled Component如何嵌套使用Props？背景色渲染失效求助

你的代码存在两处关键问题：

• 嵌套了无效的箭头函数模板字符串，导致主题颜色无法被正确解析
• 语法不完整，缺少必要的闭合括号与分号

正确实现方案 #

如果是使用styled-components这类支持主题的CSS-in-JS库，直接在同一个箭头函数中解构所需参数即可：

background-color: ${({ bg, theme }) => bg ? theme.color : '#ffffff'};

如果是普通React内联样式场景，写法调整为：

style={{ backgroundColor: bg ? theme.color : '#ffffff' }}

核心要点 #

• 无需嵌套多层模板字符串与箭头函数，直接在外层函数中同时获取bg和theme参数
• 保证语法结构完整，箭头函数的括号、模板字符串的引号都要正确闭合

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