Styled Components自定义Props访问问题求助

架构老林

2026-5-6

解决styled-components自定义props不生效的问题

嘿，我找到你的问题啦！你把styled-components的两种写法混在一起了，导致自定义的spaceBelow props没有被正确读取～

问题根源

你当前的代码里，外层用了一个接收theme的箭头函数返回模板字符串，但在模板字符串的插值里又写了另一个箭头函数props => ...。这种情况下，内层的箭头函数不会被styled-components调用执行，而是会被直接转换成字符串作为CSS值（比如最终CSS里的margin-bottom会变成props => (props.spaceBelow ? '25px' : '0')），浏览器识别不了这种无效的CSS，所以这个样式就没生效啦。

两种正确写法

写法一：直接使用模板字符串（推荐简单场景）

这是最常用的写法，在模板字符串的插值中直接写接收props的函数：

// productCardStyles.js
import styled from 'styled-components';

export default styled.div`
  background: red;
  margin-bottom: ${props => props.spaceBelow ? '25px' : '0'};
  // 如果需要访问theme，直接在插值函数里取即可
  // color: ${props => props.theme.textColor};
`;

写法二：函数返回模板字符串（适合复杂逻辑）

如果样式逻辑较多，或者需要提前解构处理props，可以把需要的属性（包括theme和自定义的spaceBelow）一起解构出来：

// productCardStyles.js
import styled from 'styled-components';

export default styled('div')(({ theme, spaceBelow }) => `
  background: red;
  // 访问theme里的属性也很方便
  // border-color: ${theme.borderColor};
  margin-bottom: ${spaceBelow ? '25px' : '0'};
`);