Custom style

If you want to completely customize the style,you need a reference lib/index.css,and using the props.className props.prefixClassName.

Bootstrap

var React = require('react')
var Dialog = require('dialog.react').default
var App = React.createClass({
    getInitialState: function () {
        return {
            show: false
        }
    },
    render: function () {
        var self = this
        return (
            <div>
                <Dialog
                    title="bootstrap"
                    show={self.state.show}
                    maskClassName="m-dialog-mask--bootstrap"
                    className="m-dialog--bootstrap"
                    onClose={function () {
                        self.setState({
                            show: false
                        })
                    }}
                    tool={(
                        <div>
                            <span className="r-dialog-btn" data-r-dialog-close="true" >Close</span>
                            <span className="r-dialog-btn r-dialog-btn--primary">Save</span>
                        </div>
                    )}
                     >
                    bootstrap style
                </Dialog>
                <button className="r-dialog-btn" onClick={function() {
                        self.setState({
                            show: true
                        })
                    }} >bootstrap</button>
            </div>
        )
    }
})
module.exports = App

./custom-style.demo.js

html .m-dialog--bootstrap {
    z-index: 1010;
}
html .m-dialog-mask--bootstrap {
    z-index: 1010;
    background-color:black;
    opacity: .5;
    filter:alpha(opacity=50);
}
html .m-dialog--bootstrap .r-dialog {
    font-size:1em;
    border-radius: .2em;
    margin:30px auto;
    border:1px solid #999;
    border:1px solid rgba(1,1,1,.8);
    background-color:white;
    box-shadow: 0 3px 9px rgba(0,0,0,.5);
}

html .m-dialog--bootstrap .r-dialog-title {
    color:black;
    font-size:18px;
    font-weight: bold;
    border-bottom:1px solid #EEE;
    position: relative;
    line-height: 1.8em;
    padding:15px;
}
html .m-dialog--bootstrap .r-dialog-close {
    display: block;
    cursor: pointer;
    border: 0;
    background: transparent;
    font-size: 1.5em;
    position: absolute;
    padding-left: 1em;
    padding-right: 1em;
    right: 0;
    top: 0;
    font-weight: 700;
    line-height: 2.7em;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
    text-decoration: none;
}
html .m-dialog--bootstrap .r-dialog-bd {
    padding: 1em;
}
html .m-dialog--bootstrap .r-dialog-tool {
    border-top:1px solid #EEE;
    padding: .3em;
}
html .m-dialog--bootstrap .r-dialog-tool {
    padding-top: 10px;
    padding-bottom: 10px;
}

html .m-dialog--bootstrap .r-dialog-btn {
    padding:.5em 1em;
    font-size: 1em;
}

rootClassName

If you don't want to hide the navigation bar, the use of rootClassName

.m-dialog-rootClasssNameExample {
    position: fixed;
    top:0;
    margin-top: 60px;
    margin-left: 200px;
    left:0;
    width:100%;
    height: 100%;
    z-index: 1010;
    overflow: hidden;    
}
.m-dialog-rootClasssNameExample .r-dialog-mask,
.m-dialog-rootClasssNameExample .r-dialog-wrap {
    position: absolute;
}
.m-dialog-rootClasssNameExample .r-dialog-wrap {
    margin-top: -30px;
    margin-left: -100px
}

var React = require('react')
var Dialog = require('dialog.react').default
var App = React.createClass({
    getInitialState: function () {
        return {
            show: false
        }
    },
    render: function () {
        var self = this
        return (
            <div>
                <Dialog
                    title="rootClassName"
                    style={{width:200}}
                    show={self.state.show}
                    rootClassName="m-dialog-rootClasssNameExample"
                    onClose={function () {
                        self.setState({
                            show: false
                        })
                    }}
                     >
                    Don't mask navigation
                </Dialog>
                <button className="r-dialog-btn" onClick={function() {
                        self.setState({
                            show: true
                        })
                    }} >rootClassName</button>
            </div>
        )
    }
})
module.exports = App

./rootClassName.demo.js

Do not mask

/* Internet explorer does not support: transform */
html .m-dialog--bodyclickable {
    width: auto;
    height: auto;
    position: fixed;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    overflow-y: inherit;
}
html .m-dialog--bodyclickable .r-dialog {
    margin: 0;
}

var React = require('react')
var Dialog = require('dialog.react').default
var App = React.createClass({
    getInitialState: function () {
        return {
            show: false,
            clickBodyShow: false,
            clickNavShow: false
        }
    },
    render: function () {
        var self = this
        return (
            <div>
                <Dialog

                    maskClassName="r-dialog-mask--hide"
                    className="r-dialog--simple m-dialog--debug"

                    title="Don't mask"
                    show={self.state.show}
                    onClose={function () {
                        self.setState({
                            show: false
                        })
                    }}
                     >
                     离离原上草，一岁一枯荣。
                    野火烧不尽，春风吹又生。
                    远芳侵古道，晴翠接荒城。
                    又送王孙去，萋萋满别情。
                    <br />
                    <strong>But you can not click on the left navigation</strong>
                </Dialog>
                <button className="r-dialog-btn" onClick={function() {
                        self.setState({
                            show: true
                        })
                }} >{"Don't mask"}</button>
                <hr/>
                <Dialog

                    className="r-dialog--simple m-dialog--bodyclickable m-dialog--debug"
                    maskClassName="r-dialog-mask--hide"

                    title="Don't mask body"
                    show={self.state.clickBodyShow}
                    onClose={function () {
                        self.setState({
                            clickBodyShow: false
                        })
                    }}
                     >
                    <div>
                        <strong>You can click on the elements in the body</strong>
                        <br/>
                            If the body can click, can't let dialog height over the window height,
                        <div style={{
                                "height": "200px",
                                "overflow": "auto"
                            }} >
                            <div style={{
                                    "height": "2000px",
                                    "border": "1px dotted skyblue"
                                }} ></div>
                        </div>
                    </div>
                </Dialog>
                <button className="r-dialog-btn" onClick={function() {
                        self.setState({
                            clickBodyShow: true
                        })
                }} >{"Don't mask body click body"}</button>
            </div>
        )
    }
})
module.exports = App

./dontMask.demo.js

prefixClassName

Completely custom styles with prefixClassName