在情感js中将函数传递给css prop答案

【问题标题】：Passing functions into css prop in emotion js在情感js中将函数传递给css prop
【发布时间】：2020-01-05 18:00:01
【问题描述】：

我正在玩 Emotion 并且非常喜欢作曲风格，特别是在样式组件中可用的 styled 系统上转移到 css 道具。我还没有弄清楚的一件事是如何使用 css 道具层中的函数。执行以下操作会导致

index.js:2177 Functions that are interpolated in css calls will be stringified.
If you want to have a css call based on props, create a function that returns a css call like this
let dynamicStyle = (props) => css`color: ${props.color}`
It can be called directly with props or interpolated in a styled call like this
let SomeComponent = styled('div')`${dynamicStyle}`

问题是我特别不想在这里使用styled 系统。

这是一些示例代码

const styleFont = (
  props: styleFontProps = {
    fontFamily: 'helvitica',
  }
) => css`
  font-family: ${props.fontFamily};
`;

const paragraph = css`
  ${styleFont};
  margin-bottom: 1rem;
`;

然后当然是稍后在返回中调用它

<div css={paragraph}>Some paragraph text</div>

【问题讨论】：

标签： emotion

【解决方案1】：

显然，即使参数为空，您也需要包含括号。见下文。

const paragraph = css`
  ${styleFont()};
  margin-bottom: 1rem;
`;

【讨论】：

注意：JavaScript 需要括号来执行函数。这只是语法。