The style attribute for rendering iframe in React/Typescript JSX, is an object, but other attributes are strings. How to write the styles?

Question

I'm trying to pass an iframe tag inside my JSX that is returned from the component. The allow="..." seems to work as a string, but style="...." gives a JSX error, expecting a mapping, not a string.

return(
  <Rnd
  style={style.casualGameContainer}
  default={{
    x: 10,
    y: 10,
    width: 810,
    height: 610,
    zIndex: 21,
  }}
  >
    <iframe id="iframe" title={gameInfo.name} name={gameInfo.name} src={gameInfo.url}
     allow="display-capture;camera;microphone;fullscreen;payment;"
     referrerpolicy="" frameborder="0" width="100%" height="100%"
     style={{zIndex:'21', border:'1px,solid,white'}}>
    </iframe>
  </Rnd>
  );

const style = StyleSheet.create({
   casualGameContainer: {
    width: '100%',
    height: '74.12%',
    flexDirection: 'row',
    zIndex: '200',
  },

The above passes the zIndex (converting it to z-index: 21) but does not pass the border. And the z-index has no effect in the iframe. (and the z-index isn't passed to the Rnd element either.

EDIT: It turns out Rnd cannot accept a stylesheet. I had to change to an object:

const style = {
    width: '100%',
    height: '74.12%',
    flexDirection: 'row',
    zIndex: '21',
};

Answer 1

The issue here is actually just that the syntax you've provided for the border isn't valid CSS

If you were doing this in plain CSS, you wouldn't write

.some-element {
  border: 1px,solid,white;
}

you would write

.some-element {
  border: 1px solid white;
}

So, you should change your style property to:

style={{zIndex: '21', border: '1px solid white'}}