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

How can we enforce that only a certain type of ReactElement is allowed to be passed as props to a Component in TypeScript?

Hiding a specific tag with vanilla JavaScript based on its content

How to retrieve the clicked value using jQuery within a jinja2 loop

Checking the validity of a username through regex

In JavaScript, not all elements are removed in a single iteration, even if the condition is consistently met

What is the best way to detect component errors on the server with Angular Universal?

Issues encountered when dealing with floating elements and margins

Nextjs doesn't render the default JSX for a boolean state on the server side

Implementing dynamic rendering of elements in Next.js using data from FaunaDB

Tips for rendering the title based on the specific ID provided by the API in nextJS

Determine the height of an element in JavaScript or jQuery by using the CSS property height: 0;

Is there a way for me to determine if a domain has been registered by the client?

Utilizing the overflow feature in conjunction with a specified height

Error: Unable to locate bundle.js when attempting to refresh the page with a specific ID in the URL

Developing ES6 modules in C++ using Node.js

Analyzing latency in node.js through numerous requests

Array contains a copy of an object

What is the best way to transfer a JavaScript object to a VueJS component?

Exploring the intricacies of defining Vue component props in TypeScript using Vue.extend()

Is there a simple solution to show script 1 to visitors from the US and Canada, while displaying script 2 to visitors from other countries?