What is the best method to incorporate a JavaScript object key's value into CSS styling?

Question

What is the best method to incorporate a JavaScript object key's value into CSS styling?

I am currently working on a project in React where I'm iterating over an array of objects and displaying each object in its own card on the screen. Each object in the array has a unique hex color property, and my goal is to dynamically set the font color of each card using Sass/CSS based on the color value stored in the object. However, I am struggling to find a way to pass this color value to my stylesheet.

// Defining the array I'm mapping over
const data = [
   {
    title: 'this is the title of object one',
    color: #979696
  },
   {
    title:'this is the title of object two',
    color: #8C64E6
  }
]
// Component to render individual cards

const Card = (props) => (
  <h3 className='title'>{props.title}</h3>
)
// CSS
.title {
  color: ????; 
}

javascript css reactjs sass styling

Answer 1

Answer №1

If you're not utilizing a CSS-in-JS solution like styled components, there is no direct way to pass styles to your Sass files.

But in this particular scenario, you could consider the following approach:

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

Answer 2

If you're not utilizing a CSS-in-JS solution like styled components, there is no direct way to pass styles to your Sass files.

But in this particular scenario, you could consider the following approach:

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

Answer 3

Answer №2

When working with JSX, you have the ability to include inline CSS. If you are passing styles as props within an object labeled styleObject, it is possible to incorporate the color property in this manner:

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

In addition, if there is a need to display a heading for each object contained in your array, here's how you can achieve it:

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

Answer 4

When working with JSX, you have the ability to include inline CSS. If you are passing styles as props within an object labeled styleObject, it is possible to incorporate the color property in this manner:

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

In addition, if there is a need to display a heading for each object contained in your array, here's how you can achieve it:

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

Answer 5

Answer №3

It is unclear whether I understand your query correctly, but you have the option to apply inline styling directly

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

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

Answer 6

It is unclear whether I understand your query correctly, but you have the option to apply inline styling directly

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

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

What is the best method to incorporate a JavaScript object key's value into CSS styling?

Answer №1

Answer №2

Answer №3

Similar questions

The cookie fails to correctly establish itself

Error message indicating that the function is not defined within a custom class method

Firefox users may notice that the pop-up video player appears in unusual locations on their screen

jQuery - Modify Turn.js to exclusively implement the page Peel effect

Preventing access to websites through a web application using JavaScript

Styling certain UL and LI elements with CSS properties

Is there a way to remove the ring shadow in TailwindCSS?

I am looking to avoid showing duplicate items in the rendering process and instead display the number of duplicates in the item_number column, but unfortunately the map functionality does not support this

There was an error during module build process: ReferenceError occurred due to an unrecognized plugin "import" specified in "base" at position 0

How can I retrieve console log information in POSTMAN when a test fails?

Use of absolute positioning resulted in the disappearance of the element

Receiving an absence of string or a null value from a text box

javascript guide to dynamically update the glyphicon based on value changes

Tips for customizing the icons and properties of the edit and delete buttons on the editable Material-table

Creating a Custom Alert Box in Javascript with Image Alignment

Retrieve an item from a mapped array

Guide on configuring Angular validation to trigger on blur events and form submission

Initiate an Ajax request solely for the elements currently visible on the screen

In a lineup of items arranged horizontally, the second to the last item is perfectly centered, whereas the final item stretches out to occupy all of the leftover

Divide the identical elements and distinct elements from a provided array into two separate arrays storing unique elements and recurring elements