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

Question

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

我正在寻找一种将样式从 React 组件（语义-ui）传递给 img 标签的方法"Card"。 "Card" 的 'image' 的边界半径似乎不为零。我喜欢它为零，所以它有 90 度角。请注意，我可以毫无问题地修改 "Card" 组件的 border-radius 。我想知道的是修改 "Card".

内 img 的 border-radius

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 inspect 上，我能够即时修改 img 的 border-radius（黄色框是我在 chrome 调试器中添加的），因此我可以获得所需的结果.但是如何从我的代码中传递样式？

Answer 1

当您将属性添加到 image: 属性时，这实际上是将其添加到围绕 <img> 的 <div>。这就是为什么图像本身的边界半径没有改变的原因。

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

但我认为这不适用于卡片上的您的情况，因此必须通过自定义样式来实现。您可以将 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。

Answer 2

它很简单ui很简单...

只需将您的 module.css 导入组件并在您的 React 语义 ui 组件上使用它：

import someCSS from './file.module.css';

return photos.map((photo, idx) => ({
    <Image src="..." className={someCss.classProperty} />
}))

或者将图像组件替换为您想要的任何其他组件，如果它具有 classnames 属性它应该可以像上例一样传递您的 class 属性。 ..

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

How to pass down style into img tag from react semantic-ui Card component

javascript

css

reactjs

semantic-ui-react