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