javascript - 如何从react-ui-ui Card组件将样式传递给img标签(How to pass down style into img tag from react semantic-ui Card component)

Question

So, my end goal is to make 'Card' component appear to be rectangle, rather than rounded.(因此，我的最终目标是使“卡片”组件看起来是矩形，而不是圆形。)

I'm looking for a way to pass a style down to img tag from react component(semantic-ui) "Card".(我正在寻找一种将样式从react component（semantic-ui）“ Card”传递给img标签的方法。) It seems like that the border radius of "Card"'s 'image' is non-zero.(似乎“卡”的“图像”的边界半径不为零。) I like it to be zero, so it has the 90 degree angles.(我喜欢它为零，所以它具有90度角。) Note that I'm able to modify "Card" component's border-radius without a problem.(请注意，我能够毫无问题地修改“卡”组件的边界半径。) What I want to know it to modify border-radius of the img inside of the "Card".(我想知道的是它可以修改“ Card”内部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 On chrome inspect, I was able to modify border-radius of img on the fly (the yellow box is what I added in chrome debugger), so I can get the desired result.(在chrome inspect上，我能够即时修改img的边界半径（黄色框是我在chrome调试器中添加的），因此我可以获得所需的结果。) But how do I pass the style from my code?(但是，如何从代码中传递样式？)   ask by Libertatem translate from so

Answer 1

When you add the properties to the image: property, this is actually adding it to the <div> that wraps around the <img> .(当您将属性添加到image:属性时，实际上是将其添加到<div> ，而<div>围绕<img> 。)

This will be why the border radius is not changing on the image itself.(这就是为什么边框半径在图像本身上没有变化的原因。) There is a property on the image called rounded and you can set this to false, which might be what you are looking for.(图像上有一个称为“ rounded的属性，您可以将其设置为false，这可能是您要查找的。) <Image src='https://react.semantic-ui.com/images/wireframe/image.png' size='medium' rounded={false} disabled /> But I don't think that will work in your circumstance on a Card, so will have to do this with custom styling.(但我认为这在您使用Card的情况下不可行，因此必须使用自定义样式来实现。) You can add a className to the image: which will add it to the outer <div> , and then use custom CSS to style the image inside.(您可以将className添加到image:它将添加到外部<div> ，然后使用自定义CSS在图像内部设置样式。) You will have to make the card have a border radius of 0 for it to be square as well.(您还必须使卡的边框半径为0，才能使其也为正方形。) Example:(例：) image: { src: photo.mediaUrl, className: "square-img" } CSS(的CSS) .square-img > img { border-radius: 0 !important; } .ui.card { border-radius: 0 !important; } You will need to import the CSS file at the top for the styles to come through.(您需要在顶部导入CSS文件，样式才能通过。) import './PhotoList.css'; Created a sandbox here: https://codesandbox.io/s/semantic-ui-example-qrebq?fontsize=14&hidenavigation=1&theme=dark .(在此处创建了一个沙箱： https : //codesandbox.io/s/semantic-ui-example-qrebq?fontsize=14&hidenavigation=1&theme=dark 。)