CSS class isn't accepted by React

Question

Im stuck on a simple error, but just can't find it.

I have created an const, too style an element. Now I want to put the constant into the CSS, but somehow that doesn't work.

I want delete this line:

 <div style={OVERLAY_STYLES}/>

Can somebody explain my mistake?

const OVERLAY_STYLES = {
  position: "fixed",
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  backgroundColor: "rgba(0,0,0, .7)",
  zIndex: 1000,
};



export default function Modal({ open, children, onClick }) {
  const [check, setCheck] = useState([]);

......

  return ReactDOM.createPortal(
    <div className="OVERLAY_STYLES">
    <div style={OVERLAY_STYLES}/>
      <div className="MODAL_STYLES">
        <h1>Blabla.</h1>
        {attribute.map((att, index) => {
          return (
            <div>
              ......
            </div>
          );
        })}
        <div className="b01">
        <button onClick={() => onClick(check)} >Submit</button>
        </div>
      </div>
      </div>
    ,
    document.getElementById("portal")
  );
}

.OVERLAY_STYLES {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0, .7);
  z-index: 1000;
  };

Answer 1

In react inline styling, all values need to be inside ' '. Change your OVERLAY_STYLES code to:

 .OVERLAY_STYLES {
  position: 'fixed';
  top: '0';
  left: '0';
  right: '0';
  bottom: '0';
  backgroundColor: 'rgba(0,0,0, .7)';
  z-index: '1000';
  };

also, no dashes so change background-color to backgroundColor

Answer 2

Root Cause:-

You are wrapping your <div style={OVERLAY_STYLES}/> under <div className="OVERLAY_STYLES"> . You are using the same style on both div tags which have z-index applied with the same value. So in your case:- with inline-style is appearing above the parent div by hiding it under itself.

I am attaching the snippet have a look for the reference:-

 const OVERLAY_STYLES = { position: "fixed", top: 20, left: 20, right: 20, bottom: 20, backgroundColor: "red", zIndex: 1000, color:"white", width:"50%", }; const App = () => /*#__PURE__*/React.createElement("div", { className: "OVERLAY_STYLES" }, /*#__PURE__*/React.createElement("div", { style: OVERLAY_STYLES }, "hELLO")); ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById("app"));

 .OVERLAY_STYLES{ position: fixed; top: 0; left: 0; right: 0; bottom: ; background-color: yellow; z-index: 1000; color:green; width:100vw; height:700px; };

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="app"></div>

Solution:-

Try changing z-index/width.
Note:- Element with higher z-index will be at the top.