在导入故事书组件时忽略主题UI sx支柱

Question

我已经安装并向私有服务器发布了一个使用包含组件的StoryBook的ThemeUI设计系统。其中一个组件是如下所示的按钮。

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支柱中的所有属性都被忽略了.

/** @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道具。有人知道为什么会这样吗？

有趣的是，如果我在Storybook中的其他地方调用组件(而不是导入单独的项目时)，sx支柱就会像预期的那样工作。

Answer 1

通过主题用户界面将sx转换为className。

请参阅工作CodeSandbox演示，然后继续阅读。

来自文档

在幕后，主题UI使用一个自定义语用注释，它将一个主题感知的sx道具转换成一个样式对象，并将其传递给情感的jsx函数。sx支柱只在文件顶部定义了自定义杂注的模块中工作，这些模块替换了默认的replaces jsx函数。这意味着您可以控制应用程序中的哪些模块选择加入此功能，而无需使用Babel插件或其他配置。这是作为情感定制JSX语用的完全替代。

对每个文件使用杂注

因此，首先需要在文件的顶部有一个杂注注释，并导入正确的jsx函数：

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

sx支柱不是传递给组件的，它实际上是转换为CSS的，className是自动生成并应用于组件的。

把className传下去

因此，如果希望父组件通过Button支柱将自定义样式应用到sx组件，则需要传递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>
);

个人建议是，而不是，使用某种将sx内容向下传播的黑客。我一直在从事一个专业的大型项目，它使用的是主题ui，除了传递className以自动合并样式之外，我们从来不需要其他任何东西。

Answer 2

好的，如果您需要更改传递给组件的属性的名称，或者看上去很困惑。因此，我做了以下更改(将sx更改为csx)：

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

然后，当组件被调用时，您将使用csx而不是sx。