如何覆盖 React 本机 web 预定义的 css

Posted 2023-02-19

【中文标题】如何覆盖 React 本机 web 预定义的 css

【英文标题】：How to override React native web pre defined css

【发布时间】：2020-09-02 04:08:56

【问题描述】：

我正在将我的 expo 应用程序转换为 react-native-web，我在显示 Image 时遇到了问题。默认情况下 react-native-web 使用 position:absolute 向 Image 添加一个类。我想重写那个类，这是我的代码。

反应原生代码

<View>
    <Image
                style=width: '80%', height: '35%',position: 'relative'
                source=require('../../assets/images/stn_logo.png')
                 title="Logo" border="0"
              />
  </View>

从 chrome 元素转换的代码

<div class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010" style="height: 35%; position: relative; width: 80%;">
    <div class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw" style="background-image: url(&quot;/static/media/stn_logo.153bbaf1.png&quot;);"></div>
    <img  draggable="false" src="/static/media/stn_logo.153bbaf1.png" class="css-accessibilityImage-9pa8cd">
</div>

在这里你可以看到 My React css 添加到 Parent div 但在 img 标签上 react-native-web 添加了一个类 css-accessibilityImage-9pa8cd，下面的 CSS 来自 chrome

    .css-accessibilityImage-9pa8cd 
    bottom: 0px;
    height: 100%;
    left: 0px;
    opacity: 0;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 100%;
    z-index: -1;

我想将 position 覆盖为 relative。我已经将 position:relative 设置为 React-Native Image 元素。 谁能帮我更改 React-native-web 的预定义 CSS

【问题讨论】：

在 index.html 中覆盖 CSS

你找到这个了吗？这发生在我的 Ignite Bowser 反应原生样板与 expo 中。

@Sigex 覆盖 index.html 中的 css 类

是什么让您认为存在 index.html？这是一个 react native 项目，使用 react native web 来生成移动应用的 web 版本。

@Sigex 当然是react native web生成index.html，先了解它是怎么工作的。由我使用弹出的 expo 应用程序。

【参考方案1】：

我在这个问题上遇到了麻烦，就像您使用的是非弹出的 expo react native 一样，并且没有 index.html 文件。解决此问题的一种方法是为丢失的图像定义高度和宽度像素。

我刚刚想到的另一种方法是创建@zulqarnain 提到的 index.html 文件——要创建它，您需要运行 expo customize:web 并选择 web/index.html，点击空格键，然后然后按回车。 -- 有关文档，请参阅 https://docs.expo.io/guides/customizing-webpack/#editing-static-files。

您可以从那里访问该文件并覆盖表单的 CSS。我在 index.html 的样式部分添加了这个

.css-accessibilityImage-9pa8cd
      inset: 0px;
    height: 100%;
    opacity: 0;
    position: relative;
    width: 100%;
    z-index: -1;
  

【参考方案2】：

我想补充一点，<img> 标签并不是用来显示图像的。它似乎只是为了增加可访问性而存在，并且在设计上是不可见的。

图像实际上是使用<img> 元素正上方的<div> 元素显示的，并使用background-image 属性和background-size:cover。它的高度和宽度为 100%，因此它的大小来自父级 <div>。

“真正的”问题是父级没有尺寸，因此应该显示图像的子级<div> 没有尺寸。这是与此处的其他答案相同的两个修复程序，但对它们的工作原理进行了一些补充说明：

第一个修复是在 React Native 中为 Image 组件添加高度和宽度。这会为父 <div> 添加高度和宽度，从而为显示图像的子 <div> 提供尺寸。 另一个对我来说似乎有点问题的修复方法是将隐藏的<img> 标记更改为position:absolute 为position:relative。这与第一个修复方法类似，通过为父 <div> 提供尺寸，然后显示图像的子 <div> 继承该尺寸。