如何在 css 中使用 javaScript object 鍵的值？

Question

我在反應中映射一組對象並將其渲染到屏幕上，每個 object 都有自己的卡，非常基本。 我的問題是每個 object 都有不同的十六進制顏色屬性，並且使用 Sass，我想將每張卡的字體顏色設置為 object 值中的顏色，但我無法弄清楚如何傳遞給 Sass'

// array I'm mapping
// fixed unescaped js comment
const array = [
   {
    title: 'this is object one\'s the title',
    color: #979696
  },
   {
    title:'this is object two\'s title',
    color: #8C64E6
  }
]
// component formatting array values

const card = props => (
  <h3 className='title'>{props.title}</h3>
)
// css
.title {
  color: ????
}

Answer 1

如果您沒有在 js 解決方案（如樣式化組件）中使用某種 css，則無法將其傳遞給您的 sass

但是在這種情況下，您可以執行以下操作：

const card = props => (
  <h3 
    className='title'
    style={{ color: props.color }}
  >
    {props.title}</h3>
)

Answer 2

您可以在 JSX 中編寫inline CSS 。 假設您在名為styleObject的 object 中將 styles 作為道具傳遞，您可以按如下方式添加顏色屬性：

const Card = props => {
    const color = props.styleObject.color
    const title = props.styleObject.color
    return (
        <h3 style={{ color: color }}>{title}</h3>
    )
}

此外，如果您想為數組中的每個 object 呈現標題，您可以按如下方式進行：

const Cards = props => {
    const array = props.array
    return array.map(heading => (
        <h3 key={heading.title} color={heading.color}>
            {title}
        </h3>
    ))
}

Answer 3

我不確定我是否正確地回答了您的問題，但您可以直接使用內聯樣式

const array = [
   {
    title: 'this is object one's the title',
    color: #979696
  },
   {
    title:'this is object two's title',
    color: #8C64E6
  }
]
// component formatting array values

const card = props => (
  <h3 style={{color:a.color}}>{props.title}</h3>
)