CODEWITHSUNDEEP
javascriptcssreactjsiframematerial-ui
daydreamer
daydreamer

Reputation: 91969

How do I convert the nested CSS using Material-UI's CSS in JS?

I have the following code fo embedding an 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>

I am using makeStyles and I want to know how to write rules for 

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

I tried the following, but it doesn't work

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%; 
}

Upvotes: 1

Views: 354

Answers (1)

Ryan Cogswell
Ryan Cogswell

Reputation: 81026

Here's the correct syntax (though not executed, so possibility of minor syntax errors):

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

Related answers and documentation:

Upvotes: 1

Related Questions