I created a custom component called InfoCard, I passed trough props the information, the component is working properly, the only issue I have is that I want to define a diferente color for the Icon prop element when I call it into other components

For ex: I need to be red to be green Is there any a possibility to do it without using CSS classes ?

InfoCard Component

interface Props {
  icon: JSX.Element
  title: string
  store?: string
  price: string
  divider?: JSX.Element
}

const Item = styled(Paper)(({ theme }) => ({
  padding: theme.spacing(1),
  margin: theme.spacing(1),
  textAlign: 'center',
  color: theme.palette.text.secondary,
}))

const InfoCard = ({ icon, title, store, price, divider }: Props) => {
  return (
    <>
      <Item>
        <Stack direction="row" spacing={2} sx={{ justifyContent: 'center' }}>
          <Box>{icon}</Box>
          <Typography>{title}</Typography>
          <Box>{divider}</Box>
          <Typography>{store}</Typography>
        </Stack>
        <Typography variant="h5" sx={{ color: 'primary.main' }}>
          {price}
        </Typography>
      </Item>
    </>
  )
}

export default InfoCard

Header Component

const Header = () => {
  const { t } = useTranslation()
  return (
    <Box>
      <Grid container>
        <Grid item xs={12} sm={12} md={6} lg={4}>
          <InfoCard
            icon={<ArrowDownIcon className="smallIcon" />}
            title={t('LOWEST_REGULAR_PRICE')}
            store="store 1"
            price="1.900"
            divider={<Divider orientation="vertical" />}
          />
        </Grid>
        <Grid item xs={12} sm={12} md={6} lg={4}>
          <InfoCard
            icon={<ArrowTrendingUpIcon className="smallIcon" />}
            title={t('AVERAGE_REGULAR_PRICE')}
            price="1.900"
          />
        </Grid>
        <Grid item xs={12} sm={12} md={12} lg={4}>
          <InfoCard
            icon={<ArrowPathIcon className="smallIcon" />}
            title={t('LAST_UPDATE')}
            price="19/07/2022"
          />
        </Grid>
      </Grid>
    </Box>
  )
}

```

CodePudding user response：

You can style a react element with the style prop as follows:

<MyComponent style={{color: "red"}} />

https://reactjs.org/docs/faq-styling.html

Hint: careful that passing rendered react components as props like you do in your code example, is usually not desired. icon={<ArrowTrendingUpIcon className="smallIcon" />} You may want to consider using props.children instead. https://reactjs.org/docs/react-api.html#reactchildren