javascript - 主题 ui 嵌入中的高度

Question

我有这个 embed theme-ui 组件，它的高度不起作用。在控制台中显示正常，但显示为 100%；

<Embed src={url} sx={{width: '800px', height: '400px'}}/>

嵌入在 100vw 的模态中，用于 100vh

谢谢

Answer 1

我一直在用这个组件进行测试，当我定义一个特定的大小时没有问题。

确保你输入你的代码/** @jsx jsx */，然后声明 jsx，像这样import { jsx } from "theme-ui";

并尝试使用最新版本，在示例中我将 0.3.1 用于 theme-ui

更新

深入挖掘，我认为有必要创建自己的组件，您可以在其中定义 iframe，因为 Embed 组件不允许您直接更改某些 css 属性。

Theme-ui 允许您使用 Box 组件创建一个 iframe，并像这样设置 a 属性：

<Box as="iframe" .../>

OwnEmbed.js

/** @jsx jsx */
import { jsx, Box } from "theme-ui";

const OwnEmbed = ({
  src,
  frameBorder = 0,
  allowFullScreen = true,
  width = "100%",
  height = 0, /** <-- It's necessary set height from outside*/
  iFrameWidth = 560,
  iFrameHeight = 315,
  allow,
  ...props
}) => {
  return (
    <Box
      {...props}
      __css={{
        width: width,
        height: height,
        position: "relative",
        overflow: "hidden"
      }}
    >
      <Box
        as="iframe"
        src={src}
        width={iFrameWidth}
        height={iFrameHeight}
        frameBorder={frameBorder}
        allowFullScreen={allowFullScreen}
        allow={allow}
        __css={{
          position: "absolute",
          width: "100%",
          height: "100%",
          top: 0,
          bottom: 0,
          left: 0,
          border: 0
        }}
      />
    </Box>
  );
};

export default OwnEmbed;

实现方式与 Embed 组件相同

主.js

/** @jsx jsx */
import { jsx, Embed, Box, Flex } from "theme-ui";
import React from "react";
import OwnEmbed from "./OwnEmbed";

class Main extends React.Component {
  render() {
    return (
      <Box p={1} bg="red">
        <OwnEmbed
          src="https://www.youtube.com/embed/GNCd_ERZvZM"
          width="100px"
          height="100px"
        />
        <hr />
        <OwnEmbed
          src="https://www.youtube.com/embed/mQ055hHdxbE"
          width="200px"
          height="200px"
        />
        <hr />
        <OwnEmbed
          src="https://www.youtube.com/embed/7oVnHbHhxLo"
          width="400px"
          height="200px"
        />
      </Box>
    );
  }
}
export default Main;

如果您在浏览器中突出显示该元素，您将看到正确的大小。

看看这个：Change size Embed from theme-ui