css Question posted in
Some basic documentation can be found here.

Css – The div wont take the box shadow style in ReactJS

i have a div that has box shadow

          <div
            className="text-white"
            style={{
              boxShadow: `0px 131px 64px -44px ${brightestColor} rgba(0, 0, 0, 0.75) inset`,
              WebkitBoxShadow: `0px 131px 110px 38px ${brightestColor} rgba(0, 0, 0, 0.75) inset`,
              MozBoxShadow: `0px 131px 110px 38px ${brightestColor} rgba(0, 0, 0, 0.75) inset`,
              height: '100px',
              width: '100px',
            }}
          ></div>

the ${brightestColor} variable value is rgb(199,230,242)

The div when rendered dosnt have box shadow how can i fix it?

Tags:

2

Answers


  1. 0

    It seems like there might be a syntax error in your CSS properties where you’re trying to use the RGBA color with the box-shadow property. The issue is in the alpha value. In CSS, it should be a decimal between 0 and 1, but you have it as a comma-separated list of integers.

    Try:

    <div
        className="text-white"
        style={{
            boxShadow: `0px 131px 64px -44px ${brightestColor} rgba(0, 0, 0, 0.75) inset`,
            WebkitBoxShadow: `0px 131px 110px 38px ${brightestColor} rgba(0, 0, 0, 0.75) inset`,
            MozBoxShadow: `0px 131px 110px 38px ${brightestColor} rgba(0, 0, 0, 0.75) inset`,
            height: '100px',
            width: '100px',
        }}
    ></div>

    Make sure to use decimals for the alpha value, not commas. This should fix the issue and make the box shadow appear as intended.

    Login or Signup to reply.
  2. 0

    Your boxShadow syntax is invalid. You’ll need to use an . for decimal.

    Also, the second color is invalid, if you remove it and start simple, you can extend from there using your dev tools

    const { useState } = React;

const Example = () => {

    const [brightestColor, _] = useState('rgb(199,230,242)');

    return (
        <div>
            <h1>{'Example'}</h1>
              <div
                className="text-white"
                style={{
                  boxShadow: `0px 131px 64px -44px ${brightestColor} inset`,
                  height: '100px',
                  width: '100px',
                }}
             ></div>
        </div>
    )
}
ReactDOM.render(<Example />, document.getElementById("react"));
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search