reactjs - 导入故事书组件时忽略主题 UI sx 属性

Question

我已经使用 ThemeUI 设置了 StoryBook 设计系统并将其发布到私有(private)服务器。包含组件。一个这样的组件是如下所示的按钮。

import React, { FC } from "react";
import { Button as ButtonUI, SxStyleProp } from "theme-ui";

export const Button: FC<ButtonProps> = ({ onClick, children, variant, sx, disabled, onMouseOver, onMouseOut }) => {
    return (
        <ButtonUI
            disabled={disabled || false}
            variant={variant || "primary"}
            onClick={onClick}
            sx={{...sx}}
            onMouseOver={onMouseOver || (() => {})}
            onMouseOut={onMouseOut || (() => {})}
        >
            {children}
        </ButtonUI>
    );
};

export type ButtonProps = {
    /**
     * The action to perform when the button is clicked
     */
    onClick: () => void;
    /**
     * The contents of the button
     */
    children?: any;
    /**
     * The type of button
     */
    variant?: string;
    /**
     * custom styles for the button
     */
    sx?: SxStyleProp;
    /**
     * If the button is disabled
     */
    disabled?: boolean;
    /**
     * The action to perform if the mouse moves over the button
     */
    onMouseOver?: () => void;
    /**
     * The action to perform if the mouse moves off the button
     */
    onMouseOut?: () => void;
};

Button.defaultProps = {
    variant: "primary",
    disabled: false
};

当我在一个单独的项目中将此组件导入我的 React 应用程序时，该组件会呈现，但 sx Prop 中的所有属性都将被忽略......

/** @jsx jsx */
import { Flex, jsx } from "theme-ui";
import Modal from "../Modal";
import { Button } from "<<<PRIVATE SERVER>>>";

/**
 * Renders a popup the gives the player the option to logout
 * @param title the heading of the modal
 * @param confirmString the text for the confirm button
 * @param cancelString the text for the cancel button
 * @param confirmAction the action to perform when the user confirms
 * @param cancelAction the action to perform when the user cancels
 */
export default function LogoutModal({ title, confirmString, cancelString, confirmAction, cancelAction }: Props) {

    return (
        <Modal
            title={title}
            closeAction={cancelAction}
            children={
                <Flex>
                    <Button
                        onClick={confirmAction}
                        sx={{
                            mr: 1
                        }}
                        variant="negative">{confirmString}</Button>
                    <Button
                        onClick={cancelAction}
                        sx={{
                            ml: 1
                        }}
                        variant="secondary">{cancelString}</Button>
                </Flex>
            }
        />
    );
}

interface Props {
    title: string;
    confirmString: string;
    cancelString: string;
    confirmAction: () => void;
    cancelAction: () => void;
}

所以按钮呈现但没有适用的边距(或我在 sx Prop 中添加的任何其他样式。有谁知道为什么会这样？
有趣的是，如果我在 Storybook 中的其他地方调用该组件(而不是在导入单独的项目时)， sx Prop 会按预期工作。

Answer 1

TL;DR sx转换为 className通过主题-ui
见working CodeSandbox demo ，然后继续阅读。

来自 documentation :

Under the hood, Theme UI uses a custom pragma comment that converts atheme-aware sx prop into a style object and passes it to Emotion's jsxfunctions. The sx prop only works in modules that have defined acustom pragma at the top of the file, which replaces the default Reactjsx functions. This means you can control which modules in yourapplication opt into this feature without the need for a Babel pluginor additional configuration. This is intended as a completereplacement for the Emotion custom JSX pragma.

在每个文件上使用编译指示
所以首先需要在文件顶部有pragma注释，并导入正确的 jsx功能:

/** @jsx jsx */
import { jsx, Button as ButtonUI, SxStyleProp } from 'theme-ui';

sx prop 没有传递给组件，它实际上被转换为 CSS 和 className自动生成并应用于组件。
传下 className因此，如果您希望父组件将自定义样式应用于 Button组件通过 sx Prop ，你需要传递 className支柱。

export const Button: FC<ButtonProps> = ({
  onClick,
  children,
  variant,
  // This does nothing...
  // sx,
  disabled,
  onMouseOver,
  onMouseOut,
  // Make sure to pass the className down to the button.
  className, // or ...props
}) => (
  <ButtonUI
    className={className}
    // {...props} // if you want any other props
    sx={{ /* any other style can be applied here as well */ }}

    disabled={disabled || false}
    variant={variant || 'primary'}
    onClick={onClick}
    onMouseOver={onMouseOver || (() => {})}
    onMouseOut={onMouseOut || (() => {})}
  >
    {children}
  </ButtonUI>
);

个人推荐到 不是 使用某种 hack 传递 sx内容下来。我一直在专业从事一个使用主题 UI 的大型项目，除了通过 className 之外，我们从来不需要其他任何东西。向下自动合并样式。