At the layout when the status is Fechado I need to change the Card and all data inside to a gray color.

Remembering that the Title, Description, Separator, Classification, MinimumValue and Profitability are the components that I created.

How can I do something easier than passing some disable properties to each component and changing the color? And how would I do that with the stars as they are .png images.

Layout:

Code of funds page.

return (<>      {funds.sort((fundA, fundB) => fundA.name.localeCompare(fundB.name)).map((fund) => (<CardContainer key={fund.id} status={fund.status}><CardHeader><View><Title title={fund.name} style={{ fontSize: 14, flexWrap: "wrap" }} /><Description description={fund.type} /></View><Status><StatusText>Novo</StatusText></Status></CardHeader><Separator /><CardFooter><Classification rating={fund.rating} /><MinimumValue price={fund.minimumValue} /><Profitability percentage={fund.profitability} /></CardFooter></CardContainer>      ))}</>  );

Styles of funds page

import styled from 'styled-components/native';export const CardContainer = styled.View`  width: 320px;  padding: 5px 17px;  min-height: 185px;  background-color: #fff;  border-radius: 10px;  margin: auto;  margin-top: 20px;  border: 1px solid #dae0e3;`;export const CardHeader = styled.View`  justify-content: space-between;  margin-top: 5px;  align-items: center;  flex-direction: row;`;export const Status = styled.View`  align-items: center;  justify-content: center;  width: 56px;  height: 20px;  background-color: #36c4d6;  border-radius: 10px;`;export const StatusText = styled.Text`  font-family: 'Montserrat-Medium';  color: #fff;  font-size: 10px;`;export const CardFooter = styled.View`  margin-top: 10px;  flex-direction: column;  justify-content: center;  margin-bottom: 5px;`;