<div className="backdrop" style={this.backdropStyle}>
                  <div className="modal" style={this.modalStyle}>
                    <div className="footer">
                      <button onClick={e => this._CloseModal(this)}>

Above code in render block .

private backdropStyle = {
position: "fixed",
top: 0,
bottom: 0,
left: 0,
right: 0,
backgroundColor: "rgba(0,0,0,0.3)",
padding: 50


private modalStyle = {
backgroundColor: "#fff",
borderRadius: 5,
maxWidth: 500,
minHeight: 300,
margin: "0 auto",
padding: 30


Error I am getting -

Type '{ position: string; top: number; bottom: number; left: number; right: number; backgroundColor: string; padding: number; }' is not assignable to type 'CSSProperties'. Types of property 'position' are incompatible. Type 'string' is not assignable to type 'PositionProperty'.

1 Answer 1


At the risk of being an unpopular response, I believe that you should try to use the Dialog control in Office UI Fabric.

Office UI Fabric helps design web parts that are consistent with the rest of Office 365 (and most of Microsoft), which means your web parts look good -- no matter what theme your site uses.

You can find out how to use it at: https://developer.microsoft.com/en-us/fabric#/components/dialog

It takes care of everything for you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.