有没有一种方法可以将样式道具传递给Emotion css `..`道具(反应)

Question

我使用@emotion/react在一个非常原子化的结构中工作，该结构将组件拆分为几个不同的文件：

• types.ts-用于类型(在web和本机之间共享(
• styles.ts-用于样式(在web和本机之间共享(
• logic.ts-任何适用的逻辑(在web和本机之间共享(
• web.tsx-web组件
• native.tsx-React本地组件

在styles.ts文件中，我有如下内容：

export const ElementWrapper = css`
border: 1px solid red
`

在web.tsx文件中，我将以如下方式编译组件：

import { ElementProps } from './types'
import { ElementWrapper } from './styles'
export const Element = ({ children, ...rest}: PropsWithChildren<ElementProps>) => {
return (
<SOME_ELEMENT css={ElementWrapper} {...rest}>
{children}
</SOME_ELEMENT>
)
}

有没有办法将样式道具传递给当前设置中的ElementWrapper组件？例如，我可以在styles.ts文件中访问的marginRight=false样式的道具？

我试图将props传递给SOME_ELEMENT组件，但显然无法传递。似乎也没有办法向SOME_ELEMENT的css属性添加更多的道具。

Answer 1

我想您可以制作一个包装器函数。

export const ElementWrapper = ({marginRight}) => css`
border: 1px solid red;
margin-right: ${marginRight};
`
// ...
return (
<SOME_ELEMENT css={ElementWrapper({marginRight: '5px'})} {...rest}>
{children}
</SOME_ELEMENT>
)