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

2023年5月17日 284次阅读

我正在使用
this卡组件,我想在它之上构建.更具体地说,我想内联更改标题的背景颜色.我的方式,它看起来像这样：

<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>

最佳答案 如果你想拥有一个具有样式的常见对象并从那里拾取东西,你必须分别声明东西并使用.

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'
}} >
点赞