How can I use a javaScript object key's value in css?

Question

I'm mapping over an array of objects in react and rendering it to the screen with each object getting its own card, pretty basic. My problem is every object has a different hex color property in it and using Sass, I want to set the font color for each card to the color in the object but I can't figure out how to pass that value to 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: ????
}

Thanks all! first time on the site and you guys fixed me up in less then an hour and no newbie criticisms!!! — john doe
– john doe, Commented Oct 27, 2019 at 18:59

Joelgullander · Accepted Answer · 2019-10-27 17:44:56Z

2

There is no way to pass that to your sass if you are not using some kind of css in js solution like styled components

However in this case you could do something like:

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

answered Oct 27, 2019 at 17:44

Joelgullander

1,6943 gold badges23 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hussain Nawaz Lalee · Accepted Answer · 2019-10-27 17:46:48Z

0

You can write inline CSS in JSX. Assuming you are passing styles as props in an object named styleObject, you can add the color property as follows:

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

Additionally if you want to render a heading for each object in your array you can do it as follows:

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

answered Oct 27, 2019 at 17:46

Hussain Nawaz Lalee

8966 silver badges16 bronze badges

Comments

M.Amer · Accepted Answer · 2019-10-27 17:48:07Z

0

I am not sure if I get your question correctly, but you can use inline style directly

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

answered Oct 27, 2019 at 17:48

M.Amer

7087 silver badges13 bronze badges

Collectives™ on Stack Overflow

How can I use a javaScript object key's value in css?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related