无法使用组件属性将不透明度值传递给图像样式

// 父组件
<ImageComponent opacity={0.5} />

// 子组件
function ImageComponent({ opacity }) {
  return <img src="path/to/image.jpg" style={{ opacity }} />;
}

/* 增加选择器权重 */
.my-image img {
  opacity: 0.5 !important;
}

/* 使用filter属性 */
.my-image img {
  opacity: 0.5;
  filter: alpha(opacity=50); /* 兼容IE8及以下 */
}

import React from 'react';
import './ImageComponent.css';

function ImageComponent({ opacity }) {
  return (
    <div className="image-container">
      <img src="path/to/image.jpg" alt="Sample" className="my-image" />
    </div>
  );
}

export default ImageComponent;

/* ImageComponent.css */
.image-container .my-image {
  opacity: 0.5; /* 默认不透明度 */
}

import React from 'react';
import ImageComponent from './ImageComponent';

function App() {
  return (
    <div>
      <ImageComponent opacity={0.7} />
    </div>
  );
}

export default App;