Make user styles work on the section container

[dkaushik95]

Target the base section element so that users can change the width/height and positioning to the section instead of the monaco editor

Reference issue: #468

[suren-atoyan]

Having className on the parent component makes sense, but it may lead to compatibility issues. We either need to wait for the next major version update or try to find something else. If your goal is to reach the section component then let's consider these workarounds:

const Container = styled('div')({
  '> section': {
    // ... write your styles here
  }
});

function OurCoolComponent() {
  return (
    <Container>
      <Editor
        language="python"
        ...
      />
    </Container>
  );
}

function OurCoolComponent() {
  return (
    <Editor
      language="python"
      wrapperProps={{
        style={{
          // ... write your styles here
        }}
      }}
    />
  );
}

[dkaushik95]

Thanks for your reply @suren-atoyan. Those are the workarounds currently in place and we can wait for the next major release to look into this. Let me know if I can do changes here based on your decision or close it and wait for an enhancement issue.