在 React/Typescript JSX 中渲染 iframe 的样式属性是 object，但其他属性是字符串。 styles怎么写？

Question

我试图在我的 JSX 中传递从组件返回的 iframe 标记。 allow="..." 似乎作为字符串工作，但 style="...." 给出了 JSX 错误，需要映射，而不是字符串。

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',
  },

以上通过 zIndex（将其转换为 z-index: 21）但不通过边界。 并且 z-index 在 iframe 中没有影响。 （并且 z-index 也没有传递给 Rnd 元素。

Answer 1

这里的问题实际上只是您为边框提供的语法无效 CSS

如果您在普通的 CSS 中执行此操作，则不会写

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

你会写

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

因此，您应该将style属性更改为：

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