styled-components中如何传递变量/字面量作为样式值

AI 小北

2026-8-29

解决方案

styled-components 中，包括:focus在内的所有伪类、伪元素选择器内部，完全支持JS插值语法，既可以直接引用外部定义的变量，也可以读取组件传入的props，不需要借助内联样式实现。

原代码无法生效的核心原因：

没有使用${}插值语法包裹JS变量，直接写变量名时，styled-components会将其识别为普通CSS关键字/值，不会做JS变量解析
原代码中accentCol的定义存在语法错误，模板字符串反引号闭合位置错误，本身就无法得到有效的颜色值

可直接参考的写法

场景1：直接使用外部定义的变量

// 先修正accentCol的语法，确保返回有效的CSS颜色字符串
const accentCol = someReduxFunctionWhichRetrievesDifferentColorsInDifferentScenarios;

const StyledInput = styled.input`
  background: #181a1a;
  border: 1px solid rgba(255, 255, 255, 0.4);
  &::placeholder {}
  &:focus {
    outline: none;
    // 通过${}插值嵌入变量即可
    border: solid 2px ${accentCol};
  }
`

场景2：根据组件传入的props动态修改focus态颜色

伪类内部的插值和外层样式写法完全一致，可以直接传入回调函数读取props：

const StyledInput = styled.input`
  background: #181a1a;
  border: 1px solid rgba(255, 255, 255, 0.4);
  &::placeholder {}
  &:focus {
    outline: none;
    border: solid 2px ${props => props.focusColor || 'rgba(255,255,255,0.4)'};
  }
`

// 使用时直接传入对应prop即可
<StyledInput focusColor={accentCol} placeholder="请输入内容" />