如何从react-ui-ui Card组件将样式传递到img标签中

Question

所以，我的最终目标是使'Card'组件看起来是矩形，而不是圆形。

我正在寻找一种将样式从react组件（semantic-ui）“ Card”传递给img标签的方法。似乎“卡”的“图像”的边界半径不为零。我喜欢它为零，所以它具有90度角。请注意，我能够毫无问题地修改“卡”组件的边界半径。我想知道的是它可以修改“卡”内部img的边框半径。

import React from 'react'
import { Card } from 'semantic-ui-react'

function PhotoList({ photos }) {
  const [displayPhotos, setDisplayPhotos] = React.useState(photos)

  async function handleClick(idx) {
    //some code...
  }

  function mapPhotosToItems(photos) {
    return photos.map((photo, idx) => ({
      // image: { src: photo.mediaUrl, style: 'border-radius:0' }, //tried.. doesn't work
      // image: { src: photo.mediaUrl, style: { borderRadius: 0 } }, //tried.. doesn't work
      image: { src: photo.mediaUrl },
      style: { borderRadius: 0 }, //this makes Card's corners rectangle.
      borderRadius: 0,
      childKey: photo._id,
      onClick: () => handleClick(idx)
    }))
  }

  return <Card.Group stackable itemsPerRow={10} centered items={mapPhotosToItems(displayPhotos)}/>;
}

export default PhotoList

在chrome检验中，我能够即时修改img的边界半径（黄色框是我在chrome调试器中添加的），因此可以获得理想的结果。但是如何从代码中传递样式？

Answer 1

将属性添加到image:属性时，实际上是将其添加到环绕<div>的<img>中。这就是为什么边框半径在图像本身上没有变化的原因。

图像上有一个名为rounded的属性，您可以将其设置为false，这可能是您想要的。 <Image src='https://react.semantic-ui.com/images/wireframe/image.png' size='medium' rounded={false} disabled />

但是我认为这在您使用Card的情况下不起作用，因此必须使用自定义样式来完成。您可以将className添加到image:，将其添加到外部<div>，然后使用自定义CSS设置内部图像的样式。

您还必须使卡的边框半径为0才能使其成为正方形。

示例：

image: { src: photo.mediaUrl, className: "square-img" }

CSS

.square-img > img {
  border-radius: 0 !important;
}

.ui.card {
  border-radius: 0 !important;
}

您将需要在顶部导入CSS文件以使样式通过。

import './PhotoList.css';

在此处创建沙箱：https://codesandbox.io/s/semantic-ui-example-qrebq?fontsize=14&hidenavigation=1&theme=dark。