Как преобразовать вложенные CSS с использованием Material-UI's CSS в JS? - PullRequest
Новая
       11

Как преобразовать вложенные CSS с использованием Material-UI's CSS в JS?

1 голос
/ 13 февраля 2020

У меня есть следующий код для встраивания 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%; 
}

1 Ответ

1 голос
/ 14 февраля 2020

Вот правильный синтаксис (хотя и не выполнен, поэтому возможны незначительные синтаксические ошибки): 

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

Связанные ответы и документация:

...