主题 ui 嵌入中的高度答案

【问题标题】：Height in theme ui embed主题 ui 嵌入中的高度
【发布时间】：2020-11-06 04:58:32
【问题描述】：

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

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

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

谢谢

【问题讨论】：

我在之前的回复中做了一些更改，大小不同，我创建了一个自定义嵌入，您可以在其中设置宽度和高度。这可能是正确的答案。

标签： javascript css reactjs next.js theme-ui

【解决方案1】：

我一直在用这个组件进行测试，当我定义一个具体的尺寸时没有问题。

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

并尝试使用最新版本，在示例中我使用 0.3.1 作为主题 UI

更新

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

Theme-ui 允许您使用 Box 组件创建 iframe，设置 a prop 如下：

<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组件

Main.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

【讨论】：