Question

我正在使用Emotion，并且非常喜欢构图样式，尤其是通过css系统上的styled道具，在样式化组件中可用。我还没有弄清的一件事是如何在css prop层内部使用函数。在

中执行以下结果

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>

Answer 1

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

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

将函数传递给情绪js中的CSS道具

1 个答案: