如何将嵌套样式传递给 React 中的组件

Question

我正在使用这个卡片组件，我想在它之上构建。更具体地说，我想内联更改标题的背景颜色。按照我的想法，它看起来像这样：

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

这不起作用，因为 React 认为 ant-card-head 是一个属性名称。有没有办法做到这一点，或者我必须使用/创建一个不同的组件？

编辑

呈现的 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

如果您想要一个具有样式的通用对象并从中获取内容，则必须单独声明内容并使用。

\n\n

const AllStyles = {\n  "ant-card-head": {\n    backgroundColor: \'#232323\'\n  },\n  "another-thing": {\n    backgroundColor: \'#ff00aa\'\n  }\n};\n<Card title=\'Produ\xc3\xa7\xc3\xa3o e reembolso\' style={AllStyles["ant-card-head"]} >\n<AnotherElem title=\'Produ\xc3\xa7\xc3\xa3o e empr\xc3\xa9stimo\' style={AllStyles["another-thing"]} >\n

\n\n

如果您只想为此元素内联样式，请执行以下操作

\n\n

<Card title=\'Produ\xc3\xa7\xc3\xa3o e reembolso\' style={{\n  backgroundColor: \'#232323\'\n}} >\n

\n