ネストされたスタイリングをリアクションのコンポーネントに渡す方法

Question

私はthisカードコンポーネントを使用しています。その上にビルドしたいと思います。具体的には、タイトルの背景色をインラインで変更したいと思います。私はそれのが、それはこのようなものになります方法：反応する

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

これは動作しませんが、アリ・カード・ヘッドは、プロパティ名であると考えています。これを行う方法はありますか、別のコンポーネントを使用/作成する必要がありますか？

編集

レンダリングされたHTMLを使用すると、スタイルを持つ共通のオブジェクトを持っており、そこからのものをピックアップしたい場合は、別途のものを宣言して使用する必要があり、この

<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

のように見えます。

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"]} > 

あなただけのこれだけの要素のスタイルをインライン化したい場合は、この

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