时间戳

首页 > 解决方案 > 如何在 JS 中使用 Material-UI 的 CSS 转换嵌套的 CSS？

javascript - 如何在 JS 中使用 Material-UI 的 CSS 转换嵌套的 CSS？

问题描述

我有以下代码嵌入iframe

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

我正在使用makeStyles，我想知道如何为

.embed-container iframe, 
.embed-container object, 
.embed-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

我尝试了以下方法，但它不起作用

embedContainer: {
    position: "absolute",
    top: 0,
    left: 0,
    width: "100%",
    height: "100%",
    border: "6px solid yellow"
  }

embedContainer iframe: { 
position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

标签： javascriptcssreactjsiframematerial-ui

解决方案

这是正确的语法（虽然没有执行，所以可能存在轻微的语法错误）：

const useStyles = makeStyles({
  embedContainer: {
    "& iframe, & object, & embed": {
        position: "absolute",
        top: 0,
        left: 0,
        width: "100%",
        height: "100%"
    }
  }
});

相关答案和文档：

推荐阅读