CODEWITHSUNDEEP
javascriptcssreactjs
Sharp Dev
Sharp Dev

Reputation: 1070

Complex BackgroundImage styling not working in react, but works in css/javascript

This problem is extremely specific to this use case. All other cases I have been able to get to work properly, but for some reason this case does not work. Given a div
<div id="colorDiv" style="height: 100px; width: 100px;"></div> we can normally use in javascript:
let colDiv = document.getElementById("colorDiv"); colDiv.style.cssText = "background: green; background: linear-gradient(225deg, transparent 50%, green 0) top left, linear-gradient(135deg, transparent 50%, green 0) top right, linear-gradient(315deg, transparent 50%, green 0) bottom right, linear-gradient(45deg, transparent 50%, green 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat;";
(this will give a large green check mark). Anyway, I am trying to do this in React JS and I am tyring to get the value (here green) from an input (and should be predefined/stored in my reducer hook). Whenever I try to set the BackgroundImage property to this type of large value (given above), it never comes through on the output... Why would this be so, and how could you get this type of 4 linear gradients in-line with React.

Please note that I am able to get a single linear-gradient into the background image property in React and still having in-line styling, but having this type (with 4 of them, does not work). Any advice would be much appreciated.

Thanks in advance.

Upvotes: 0

Views: 279

Answers (1)

Temani Afif
Temani Afif

Reputation: 274237

Here is a different idea to do the same where you can keep most of the CSS outside and you only need one background as inline style:

.colorDiv {
  background-size:0 0;
  display:inline-block;
}
.colorDiv::before,
.colorDiv::after{
  content:"";
  float:left;
  width:50%;
  height:50%;
  background-image:inherit;
  transform:skewY(45deg);
  transform-origin:left;
}
.colorDiv::after {
  transform:skewY(-45deg);
  transform-origin:right;
}
<div class="colorDiv" style="height: 100px; width: 100px;background-image:linear-gradient(green,green)"></div>

<div class="colorDiv" style="height: 100px; width: 100px;background-image:linear-gradient(red,red)"></div>

<div class="colorDiv" style="height: 100px; width: 100px;background-image:linear-gradient(blue,blue)"></div>

Or simply use CSS variables with your code:

.colorDiv {
 background: 
   linear-gradient(225deg, transparent 50%, var(--c,green) 0) top left, 
   linear-gradient(135deg, transparent 50%, var(--c,green) 0) top right, 
   linear-gradient(315deg, transparent 50%, var(--c,green) 0) bottom right, 
   linear-gradient(45deg , transparent 50%, var(--c,green) 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  display:inline-block;
}
<div class="colorDiv" style="height: 100px; width: 100px;"></div>
<div class="colorDiv" style="height: 100px; width: 100px;--c:red"></div>
<div class="colorDiv" style="height: 100px; width: 100px;--c:blue"></div>

Upvotes: 1

Related Questions