How to pass nested styling to a component in React

Question

I'm using this card component, and I'd like to build on top of it. More specifically, I'd like to inline change the background color of titles. The way I though of it, it would look something like this:

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

This doesn't work, as React thinks ant-card-head is a property name. Is there a way to do this, or I'll have to use/create a different component?

Edit

Rendered HTML looks like this

<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

If you want to have a common object having styles and pick up stuff from there, you have to declare stuff separately and use.

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

If you just want to inline styles only for this element you do this

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