Question

我正在反应中映射对象数组，并将其渲染到屏幕上，每个对象都有自己的卡片，非常基本。我的问题是每个对象中都有不同的十六进制颜色属性，并且使用Sass，我想将每个卡的字体颜色设置为对象中的颜色，但是我不知道如何将该值传递给Sass / css。

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

如果您未在styled components这样的js解决方案中使用某种CSS，就无法将其传递给您的sass。

但是在这种情况下，您可以执行以下操作：

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

Answer 2

您可以在JSX中编写inline CSS。假设您将样式作为道具传递给名为styleObject的对象，则可以按如下所示添加color属性：

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

此外，如果要为数组中的每个对象渲染标题，则可以按以下步骤进行操作：

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

如何在CSS中使用javaScript对象键的值？

3 个答案: