Как я могу использовать значение ключа объекта javaScript в css? - PullRequest
Новая
       30

Как я могу использовать значение ключа объекта javaScript в css?

0 голосов
/ 27 октября 2019

Я сопоставляю массив реагирующих объектов и отображаю его на экране, где каждый объект получает свою собственную карту, довольно простую. Моя проблема в том, что у каждого объекта есть свое свойство шестнадцатеричного цвета, и, используя 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: ????
}

Ответы [ 3 ]

2 голосов
/ 27 октября 2019

Нет способа передать это в sass, если вы не используете какое-то решение css в js, такое как стилизованные компоненты

Однако в этом случае вы можете сделать что-то вроде:

const card = props => (
  <h3 
    className='title'
    style={{ color: props.color }}
  >
    {props.title}</h3>
)
0 голосов
/ 27 октября 2019

Я не уверен, правильно ли я понял ваш вопрос, но вы можете использовать встроенный стиль напрямую 

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>
)
0 голосов
/ 27 октября 2019

Вы можете написать inline CSS в JSX. Предполагая, что вы передаете стили как объекты в объекте с именем 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>
    ))
}
...