React components experiencing conflicts when using shorthand inline styles that overwrite one another

Question

React components experiencing conflicts when using shorthand inline styles that overwrite one another

Within my React component, I am receiving a values object with attributes like:

{gridColumn: '1 / 3', gridRow: '2 / 5', gridArea: 'header'}

I apply these values to the component's style as follows:

this.cell.style.setProperty('grid-area', values.gridArea);
this.cell.style.setProperty('grid-column', values.gridColumn);
this.cell.style.setProperty('grid-row', values.gridRow);

The issue arises when using grid-column and grid-row properties, as they are condensed into shorthand notation 'grid-area: 2 / 1 / 5 / 3' by the browser, leading to an overwrite of the grid-area style.

This problem persists even if I try setting the styles in a loop:

for (let prop in values) {
  this.cell.style[prop] = values[prop];
};

Are there more effective approaches to handle this situation?

javascript css reactjs

Answer 1

Answer №1

According to MDN:

grid-area serves as a shorthand for grid-row-start, grid-column-start, grid-row-end, and grid-column-end
grid-column is a shorthand for grid-column-start and grid-column-end
grid-row acts as a shorthand for grid-row-start and grid-row-end.

Therefore, it can be understood that grid-area conflicts with both grid-column and grid-row. React does not have the ability to automatically merge these CSS properties; instead, it prioritizes the last one defined.

To address this, you have the option to implement the logic to combine these properties manually:

  const mergedGridColumn = gridColumn.replace(/[0-9*]/g, value => `${value} ${gridArea}`);
  const mergedGridRow = gridRow.replace(/[0-9*]/g, value => `${value} ${gridArea}`);

Utilizing the following values:

{
  const values = {
  gridArea: 'header',
  gridColumn: '1 / 3',
  gridRow: '2 / 5',
}

This would generate the following style:

{
  grid-area: 2 header / 1 header / 5 header / 3 header;
}

For a comprehensive example, refer to the code snippet below:

const App = () => {
  const values = {
    gridArea: 'header',
    gridColumn: '1 / 3',
    gridRow: '2 / 5',
  };

  return (
    <div className="App" style={{display: 'grid'}}>
      <Header values={values} />
    </div>
  );
}

const Header = (props) => {
  const { gridArea, gridColumn, gridRow } = props.values;

  const mergedGridColumn = gridColumn.replace(/[0-9*]/g, value => `${value} ${gridArea}`);
  const mergedGridRow = gridRow.replace(/[0-9*]/g, value => `${value} ${gridArea}`);
  return (
    <div
      className="App-header"
      style={{
        gridColumn: mergedGridColumn,
        gridRow: mergedGridRow,
      }}
      >
      <h2>Welcome to React</h2>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.App {
  text-align: center;
}

.App-header {
  background-color: orchid;
  color: white
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Answer 2

According to MDN:

grid-area serves as a shorthand for grid-row-start, grid-column-start, grid-row-end, and grid-column-end
grid-column is a shorthand for grid-column-start and grid-column-end
grid-row acts as a shorthand for grid-row-start and grid-row-end.

Therefore, it can be understood that grid-area conflicts with both grid-column and grid-row. React does not have the ability to automatically merge these CSS properties; instead, it prioritizes the last one defined.

To address this, you have the option to implement the logic to combine these properties manually:

  const mergedGridColumn = gridColumn.replace(/[0-9*]/g, value => `${value} ${gridArea}`);
  const mergedGridRow = gridRow.replace(/[0-9*]/g, value => `${value} ${gridArea}`);

Utilizing the following values:

{
  const values = {
  gridArea: 'header',
  gridColumn: '1 / 3',
  gridRow: '2 / 5',
}

This would generate the following style:

{
  grid-area: 2 header / 1 header / 5 header / 3 header;
}

For a comprehensive example, refer to the code snippet below:

const App = () => {
  const values = {
    gridArea: 'header',
    gridColumn: '1 / 3',
    gridRow: '2 / 5',
  };

  return (
    <div className="App" style={{display: 'grid'}}>
      <Header values={values} />
    </div>
  );
}

const Header = (props) => {
  const { gridArea, gridColumn, gridRow } = props.values;

  const mergedGridColumn = gridColumn.replace(/[0-9*]/g, value => `${value} ${gridArea}`);
  const mergedGridRow = gridRow.replace(/[0-9*]/g, value => `${value} ${gridArea}`);
  return (
    <div
      className="App-header"
      style={{
        gridColumn: mergedGridColumn,
        gridRow: mergedGridRow,
      }}
      >
      <h2>Welcome to React</h2>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.App {
  text-align: center;
}

.App-header {
  background-color: orchid;
  color: white
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

React components experiencing conflicts when using shorthand inline styles that overwrite one another

Answer №1

Similar questions

Utilizing the power of jQuery's $.each method to dynamically generate HTML select options within an AJAX

Utilize Protractor Selenium to extract content from a popup window

The Jodit editor is appearing incorrectly

AngularJS, sort through "afoo" excluding "foo"

How can I use HTML to display a new image next to the base image when I hover over it, showing both images side by side?

Tips for handling an AJAX form submission with various submit buttons and navigating through Laravel routes

The subsequent code still running even with the implementation of async/await

Eliminate the CSS triggered by a mouse click

Error in React Material-UI Theme

Using Three.js to control the camera's position and direction

Wait until the user submits the form before activating Angular validations, and do not display any validation messages if the user deletes text from a text box

On my production server, json_encode functions flawlessly, however, in the development environment, it

Display logo when website has been scrolled

Utilize ReactJS to Retrieve Numerous Values with One Dropdown Selection

What is the best way to store all rows in a dynamically changing table with AngularJS?

Send the NameSpace to the object and store it in the local storage

Enhance your Ag-Grid experience with paginated data storage

Ways to create animation solely using CSS for a div element

How to retrieve a refined selection of items

Bot in discord.js refuses to exit voice channel