如何将 CSS 添加到 Lightbox？答案

【问题标题】：How can I add css to Lightbox?如何将 CSS 添加到 Lightbox？
【发布时间】：2021-10-17 04:06:26
【问题描述】：

我正在使用 Lightbox，我想更改其默认样式.. 我用makeStyles。

<Lightbox
  images={[{src:imageRef.current}]}
  isOpen={imgDialogOpen}
  onClose={closeImgDialog}
/>

它有一个名为 content_1h4z6hc 的默认类，我想向它添加更多内容，例如 background-color。

我应该怎么做？

【问题讨论】：

Lightbox名字的包是什么？
反应图像缩放打印

标签： javascript css reactjs react-hooks

【解决方案1】：

react-images-zoom-print 不支持通过道具更新 css。所以你可以使用你的 css 来覆盖默认 css。

这个包使用 id lightboxBackdrop。所以你可以在此基础上编写你的 css：

#lightboxBackdrop {
  background-color: yellow;
}

https://codesandbox.io/s/inspiring-hopper-q94z7?file=/src/styles.css:59-109

【讨论】：

我根据您的回答更新了我的问题。如何使用 makeStyles 来做到这一点？
makeStyles 只用于material-ui
添加css文件并像代码示例一样导入组件

【解决方案2】：

您需要使用activeProps，请这样尝试：

activeProps={{width: '10px'}}

或者直接使用样式

<Lightbox
    style={{ width: 10 }}
    backgroundColor="#000"
  >
    <Image
      style={{
        borderRadius: 15,
        width: "100%", 
      }}
      resizeMethod="resize"
      resizeMode="cover"
    />
  </Lightbox>

【讨论】：

这是什么意思？ ` `