Можно ли изменить размер изображения дочернего элемента, не затрагивая родительский элемент в React, используя Tailwind ⇐ CSS

[Anonymous]

У меня есть страница «Продукты», на которой отображаются все мои компоненты SingleProduct.
Это работает нормально, но я хотел бы изменить размер изображения на моей странице SingleProduct, но когда я это делаю, это также изменяет размеры всех мои продукты на странице «Продукты».
Можно ли применить к этим компонентам разные стили CSS с учетом того, как я их отображаю?
const Products = () => {
const products = data;

return (

{products.map((prod) => {
return (



)
})}


)
}

export default Products

const SingleProduct = (props) => {
const [image, setImage] = useState()
const [title, setTitle] = useState()
const [price, setPrice] = useState()
useEffect(() => {
setImage(props.product.image)
setTitle(props.product.title)
setPrice(props.product.price)
}, [])

return (


{title}


[img]{image}
className='rounded-xl w-full object-cover'
/>

Price: {price}


)
}

export default SingleProduct


import SingleProduct from "./SingleProduct";
import { useParams } from "react-router-dom";
import { useState, useEffect } from "react";
import data from "../data";

const SingleProductPage = () => {
let { id } = useParams();
const [product, setProduct] = useState();

useEffect(() => {
id && setProduct(data.find((prod) => prod.id == id))
}, [id]) // runs whenever the id changed and updates the product

return product ? : null
}

export default SingleProductPage;

import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import { HomeLayout, Landing, Products, SingleProduct } from './pages'
import './App.css'

import SingleProductPage from './pages/SingleProductPage'

const router = createBrowserRouter([
{
path: '/',
element: ,
children: [
{
index: true,
element: ,
},
{
path: 'product',
element: ,
},
{
path: 'product/:id',
element: ,
},
]
},

])

function App() {

return (

)
}

export default App


Подробнее здесь: https://stackoverflow.com/questions/791 ... nt-element