Using react-dat-gui directly does not style the components

[alecmce]

I had to open up your demo, find this stylesheet, and copy it into my repo for the UI to look correct ... just FYI. If there's a styling trick I'm missing, please can you add it to the readme?

.react-dat-gui{position:fixed;right:16px;top:0;width:280px;font-size:12px;font-family:Lucida Grande,sans-serif;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}.react-dat-gui *,.react-dat-gui :after,.react-dat-gui :before{box-sizing:inherit}.react-dat-gui .dg{margin:0;padding:0;color:#eee;overflow:hidden}.react-dat-gui .dg ul{list-style:none;margin:0;padding:0;width:100%;clear:both}.react-dat-gui .dg.main::-webkit-scrollbar{width:5px;background:#1a1a1a}.react-dat-gui .dg.main::-webkit-scrollbar-corner{height:0;display:none}.react-dat-gui .dg.main::-webkit-scrollbar-thumb{border-radius:5px;background:#676767}.react-dat-gui .cr{display:block;background-color:#1a1a1a;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.react-dat-gui .cr:not(:last-child){border-bottom:1px solid #272727}.react-dat-gui .cr label{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:start;justify-content:flex-start;width:100%;padding:1px 2px 1px 8px}.react-dat-gui .cr .label-text{width:40%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.react-dat-gui .cr input[type=number],.react-dat-gui .cr input[type=text]{background:#303030;border:3px solid #1a1a1a;border-radius:0;margin:0;outline:none;font-size:inherit}.react-dat-gui .cr input[type=number]:hover,.react-dat-gui .cr input[type=text]:hover{background:#3c3c3c}.react-dat-gui .cr input[type=number]:focus,.react-dat-gui .cr input[type=text]:focus{background:#494949;color:#fff}.react-dat-gui .cr input[type=number]::-ms-clear,.react-dat-gui .cr input[type=text]::-ms-clear{display:none}.react-dat-gui .cr.boolean{position:relative;border-left:5px solid #806787}.react-dat-gui .cr.boolean label{cursor:pointer}.react-dat-gui .cr.boolean .label-text{display:block;padding:5px 0}.react-dat-gui .cr.boolean .checkbox-container{width:100%}.react-dat-gui .cr.boolean input[type=checkbox]{margin:0;vertical-align:middle}.react-dat-gui .cr.button{border-left:5px solid #e61d5f}.react-dat-gui .cr.button:hover{background:#111}.react-dat-gui .cr.button .label-text{display:block;width:100%;padding:6px 2px 6px 8px;cursor:pointer}.react-dat-gui li.folder{display:block;padding:0}.react-dat-gui li.folder .title{font-weight:700;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;cursor:pointer;padding:5px 5px 5px 16px;background:#000 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 48% no-repeat}.react-dat-gui li.folder ul{margin-left:4px;width:calc(100% - 4px)}.react-dat-gui li.folder.closed .title{background:#000 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==) 6px 48% no-repeat}.react-dat-gui li.folder.closed ul{display:none}.react-dat-gui .cr.number{border-left:5px solid #2fa1d6}.react-dat-gui .cr.number input[type=number],.react-dat-gui .cr.number input[type=text]{color:#2fa1d6;height:25px}.react-dat-gui .cr.number .slider{display:block;position:relative;border:3px solid #1a1a1a;border-right-width:1px;background-color:#303030;background-image:-webkit-gradient(linear,left top,right top,from(#2fa1d6),to(#2fa1d6));background-image:linear-gradient(90deg,#2fa1d6,#2fa1d6);background-size:0 100%;background-repeat:no-repeat;cursor:ew-resize;height:25px}.react-dat-gui .cr.string{border-left:5px solid #1ed36f}.react-dat-gui .cr.string input[type=text]{color:#1ed36f;padding:2px 5px;width:100%}.react-dat-gui .cr.select{border-left:5px solid #f4d450}.react-dat-gui .cr.select label{padding:6px 2px 6px 8px}.react-dat-gui .cr.color{border-left:5px solid #1a1a1a}.react-dat-gui .cr.color .swatch{text-align:center;font-weight:700;color:#fff;text-shadow:rgba(0,0,0,.7) 0 1px 1px;padding:2px 5px;border:3px solid #1a1a1a;cursor:pointer}.react-dat-gui .cr.color .popover{position:absolute;z-index:2;right:5px}.react-dat-gui .cr.color .cover{position:fixed;top:0;right:0;bottom:0;left:0}.react-dat-gui .cr.color .picker{background:#fff;box-shadow:0 0 2px rgba(0,0,0,.3),0 4px 8px rgba(0,0,0,.3);box-sizing:initial;width:auto;font-family:Menlo,sans-serif;margin-top:-3px}.react-dat-gui .cr.color .picker .body{padding:0}.react-dat-gui .cr.color .picker .body .controls{display:-webkit-box;display:flex}.react-dat-gui .cr.color .picker .body .controls .toggles{-webkit-box-flex:1;flex:1}.react-dat-gui .cr.color .picker .body .controls .toggles .hue-wrap{height:10px;position:relative}.react-dat-gui .cr.color .picker .saturation-wrap{width:100%;padding-bottom:55%;position:relative;overflow:hidden}.react-dat-gui .cr.color .fields-wrap{display:-webkit-box;display:flex}.react-dat-gui .cr.color .fields-wrap .fields{-webkit-box-flex:1;flex:1;display:-webkit-box;display:flex;margin-left:-6px}.react-dat-gui .cr.color .fields-wrap .fields .field{padding-left:6px;width:100%}.react-dat-gui .cr.color .fields-wrap .fields .field input{font-size:11px;color:#333;border-radius:2px;border:none;box-shadow:inset 0 0 0 1px #dadada;height:21px;text-align:center}.react-dat-gui .cr.color .fields-wrap .fields .field input:focus{outline:none}.react-dat-gui .cr.color .fields-wrap .fields .field label{text-transform:uppercase;font-size:11px;line-height:11px;color:#969696;text-align:center;display:block;margin-top:12px}.react-dat-gui .cr.color .pointer{width:12px;height:12px;border-radius:6px;-webkit-transform:translate(-6px,-1px);transform:translate(-6px,-1px);background-color:#f8f8f8;box-shadow:0 1px 4px 0 rgba(0,0,0,.37);position:absolute;z-index:3}.react-dat-gui .cr.color .pointer-circle{width:12px;height:12px;border-radius:6px;box-shadow:inset 0 0 0 1px #fff;-webkit-transform:translate(-6px,-6px);transform:translate(-6px,-6px)}.react-dat-gui .cr.presets{border-left:5px solid #dad5cb}.react-dat-gui .cr.presets label{padding:6px 2px 6px 8px}.react-dat-gui .cr.presets label select{width:100%}

[bhouston]

Me too!

[yes-liu]

me too!