如何覆盖React Native Web预定义CSS

Question

我正在将博览会应用程序转换为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')}
                alt="Logo" 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 alt="" 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设置为React-Native Image元素。谁能帮助我更改React-native-web的预定义CSS

Answer 1

您可以定位所有img元素，并使用！important规则添加相对位置。