Comment passer le style imbriqué à un composant dans React

Question

J'utilise le composant de carte this, et je voudrais construire dessus. Plus précisément, j'aimerais modifier la couleur d'arrière-plan des titres. La façon dont je même si bien, il ressemblerait à quelque chose comme ceci:

<Card title='Produção e reembolso' style={{ 
    ant-card-head: { 
    backgroundColor: '#232323' 
    } 
}} > 
    <div> R$ {productionAmount} </div> 
</Card> 

Cela ne fonctionne pas, comme React pense ant carte-tête est un nom de propriété. Y at-il un moyen de le faire, ou je vais devoir utiliser/créer un composant différent?

Modifier

HTML Rendus ressemble à ce

<div class="ant-card ant-card-bordered"> 
    <div class="ant-card-head"> 
    <h3 class="ant-card-head-title">Produção e reembolso</h3> 
    </div> 
    <div class="ant-card-body"> 
    <div><!-- react-text: 150 --> R$ <!-- /react-text --></div> 
    </div> 
</div> 

Answer 1

Si vous voulez avoir un objet commun ayant des styles et ramasser des choses à partir de là, vous devez déclarer des choses séparément et utiliser.

const AllStyles = { 
    "ant-card-head": { 
    backgroundColor: '#232323' 
    }, 
    "another-thing": { 
    backgroundColor: '#ff00aa' 
    } 
}; 
<Card title='Produção e reembolso' style={AllStyles["ant-card-head"]} > 
<AnotherElem title='Produção e empréstimo' style={AllStyles["another-thing"]} > 

Si vous voulez juste inline styles seulement pour cet élément que vous faites ce

<Card title='Produção e reembolso' style={{ 
    backgroundColor: '#232323' 
}} >