How to pass a nested style to a component in React
I am using this map component and I would like to build on top of it. In particular, I would like to change the background color in the headers. Anyway, it would look 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 the name of the property. Is there a way to do this, or will I have to use / create another component?
Edit
The 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>
+3
source to share
1 answer
If you want to have a common object with styles and collect things from there, you need to declare the material 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 for that element only, you do this
<Card title='Produção e reembolso' style={{
backgroundColor: '#232323'
}} >
+1
source to share