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". 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. 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".

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. But how do I pass the style from my code?

Answer 1

When you add the properties to the image: property, this is actually adding it to the <div> that wraps around the <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. <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. 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.

You will have to make the card have a border radius of 0 for it to be square as well.

Example:

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

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.

import './PhotoList.css';

Created a sandbox here: https://codesandbox.io/s/semantic-ui-example-qrebq?fontsize=14&hidenavigation=1&theme=dark.