Using JavaScript to store CSS style properties in an array

Question

Using JavaScript to store CSS style properties in an array

In the midst of building a React-datagrid project, I am streamlining CSS properties for an array. However, there seems to be redundant CSS properties that I would like to consolidate into an array format.

let _columns = [];

let commonStyle = {"width":"200","height":"300"};

_columns.push({
   style:commonStyle
});

When adding new properties, you can directly write them out:

_columns.push({
   width: 200
});

This method works, or you can use a variable (holding a single property value) like this:

let commonWidth = 200;

_columns.push({
   width: commonWidth 
});

However, I am facing issues when trying to utilize an array like 'commonStyle' with multiple properties/values. Is my syntax incorrect? Even when reducing the array to a single property, such as:

let commonStyle = {"width":"200"};

the style does not seem to apply... What could be causing this issue?

javascript css arrays reactjs

Answer 1

Answer №1

The examples you provided result in a distinct object layout compared to the initial example, in which the properties are nested within the "style" property identifier. Moreover, commonStyle should not be an array but rather an object with defined attributes.

Consider this alternative approach:

const commonStyle = {width: 200, height: 300};
_columns.push(commonStyle);

Answer 2

The examples you provided result in a distinct object layout compared to the initial example, in which the properties are nested within the "style" property identifier. Moreover, commonStyle should not be an array but rather an object with defined attributes.

Consider this alternative approach:

const commonStyle = {width: 200, height: 300};
_columns.push(commonStyle);

Answer 3

Answer №2

When dealing with shared styles in multiple components within a sizable project, it's advisable to opt for creating a separate .css or .less file to contain them.

.section{
    width: 250
    height: 350
}

Subsequently, apply the className='section' property instead.

By embedding styles directly into the codebase, future refactoring and restyling tasks could become more challenging and lead to poor design practices.

Answer 4

When dealing with shared styles in multiple components within a sizable project, it's advisable to opt for creating a separate .css or .less file to contain them.

.section{
    width: 250
    height: 350
}

Subsequently, apply the className='section' property instead.

By embedding styles directly into the codebase, future refactoring and restyling tasks could become more challenging and lead to poor design practices.

Using JavaScript to store CSS style properties in an array

Answer №1

Answer №2

Similar questions

Inability to update Vue.js component data even after a successful GET request

Using Props.store does not function properly when passed down to child components

The value of req.headers('Authorization') has not been defined

Increase the amount of money in my current balance using React

Passing a service into a directive results in an undefined value

One may wonder about the distinction between running `npm i` and `npm i <package name>`

What are the differences between ajax loaded content and traditional content loading?

Tips for accessing private variables

Utilizing webpack HMR (Hot Module Replacement) independently of the webpack-dev-server

Should the package for icons in the library I'm constructing be categorized under dependencies or devDependencies?

Tips for sorting items in Wordpress with JavaScript / on click?

Can you explain the significance of "q" and "+" within the CSS properties of the HTML body tag?

Mastering the Art of Merging 3 Arrays

Having trouble retrieving the global variable within a while loop

A dynamic jQuery plugin that replicates the smooth page sliding animation found in iPhone apps

Struggling to get Axios working in Node despite having it properly installed

How can we access a value within a deeply nested JSON object in Node.js when the key values in between are not

Developing a feature in React Native to retrieve the user's location without properly updating and returning the received data

Traverse Through multiple strings in double pointer of characters

Displaying text and concealing image when hovering over a column in an angular2 table