React+TypeScript环境下styled-components如何向外部函数传参

你原有写法报错的原因是styled模板字符串的顶层作用域不存在props变量，需要通过一层箭头函数中转，由styled-components运行时自动注入组件接收的props参数，具体实现如下：

1. 定义自定义处理函数 #

函数接收myArr作为入参，返回合法的CSS规则片段，建议使用styled-components提供的css辅助函数包裹返回值，避免类型和格式异常：

import styled, { css } from 'styled-components';

function myFunc(myArr: Object[]) {
  // 此处写你的自定义处理逻辑
  const targetOpacity = myArr[0]?.myOpacity ?? 1;
  return css`
    opacity: ${targetOpacity};
    /* 可返回多条CSS规则 */
  `;
}

2. 定义styled组件 #

在插值位置传入箭头函数，接收props后调用自定义函数传入myArr即可：

export const Wrap = styled.div<{ myArr: Object[] }>`
  /* 其他通用样式 */
  width: 100%;
  padding: 16px;

  /* 箭头函数接收props，中转调用自定义函数 */
  ${props => myFunc(props.myArr)}
`;

3. 组件调用 #

和你预期的传参方式完全一致：

const myArr = [{ myOpacity: 0.6 }];

function ParentComponent() {
  return <Wrap myArr={myArr}>组件内容</Wrap>
}

该写法满足你的要求：所有参数处理逻辑都封装在myFunc内，不会直接在styled的模板中写props取值逻辑。

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