react-component-analyzer/dist/viewer.css

Analyze the component tree of react and displays it as a diagram in the browser. You can refer to the corresponding code from the diagram.

.bi.bi-diagram{box-sizing:border-box;width:100%;height:100%;border:.07rem solid #dae1e7;border-radius:.25rem;box-shadow:0 .8rem 1rem -.2rem #0000001a,0 .25rem .5rem -.02rem #0000000d;min-height:100%;background-color:#f8fafc;position:relative;overflow:hidden}.bi.bi-diagram .bi.bi-diagram-node{box-sizing:content-box;position:absolute;z-index:50;-webkit-user-select:none;-ms-user-select:none;user-select:none}.bi.bi-diagram .bi.bi-diagram-node .bi-port-wrapper{display:flex}.bi.bi-diagram .bi.bi-diagram-node .bi-port-wrapper .bi-input-ports,.bi.bi-diagram .bi.bi-diagram-node .bi-port-wrapper .bi-output-ports{flex:1 1}.bi.bi-diagram .bi.bi-diagram-node .bi-port-wrapper .bi-input-ports .bi-diagram-port,.bi.bi-diagram .bi.bi-diagram-node .bi-port-wrapper .bi-output-ports .bi-diagram-port{transition:background-color .25s ease-in-out;backface-visibility:hidden;will-change:background-color;background-color:#00000014;width:20px;width:1.25rem;height:20px;height:1.25rem;margin-bottom:.25rem}.bi.bi-diagram .bi.bi-diagram-node .bi-port-wrapper .bi-input-ports .bi-diagram-port:hover,.bi.bi-diagram .bi.bi-diagram-node .bi-port-wrapper .bi-output-ports .bi-diagram-port:hover{background-color:#0000001a}.bi.bi-diagram .bi.bi-diagram-node .bi-port-wrapper .bi-output-ports .bi-diagram-port{margin-left:auto}.bi.bi-diagram .bi.bi-diagram-node.bi-diagram-node-default{transition:box-shadow .25s ease-in-out,border .3s ease-out;backface-visibility:hidden;will-change:box-shadow,border;border:.07rem solid #8795a1;background-color:#dae1e7;color:#606f7b;border-radius:.25rem;box-shadow:0 .07rem .2rem #0000001a,0 .07rem .125rem #0000000f;padding:.5rem}.bi.bi-diagram .bi.bi-diagram-node.bi-diagram-node-default:hover{box-shadow:0 .125rem 1rem -.2rem #0000001a,0 .25rem .3rem -125rem #0000000d}.bi.bi-diagram .bi.bi-diagram-node.bi-diagram-node-default .bi-port-wrapper{margin-left:-.5rem;margin-right:-.5rem}.bi.bi-diagram .bi-link-canvas-layer{pointer-events:none;width:100%;height:100%;z-index:0;position:absolute;inset:0}.bi.bi-diagram .bi-link-canvas-layer .bi-diagram-segment path{stroke:#dae1e7;stroke-width:.25rem;stroke-dasharray:10,2;fill:transparent;animation:BiDashSegmentAnimation 1s linear infinite}.bi.bi-diagram .bi-link-canvas-layer .bi-diagram-segment circle{stroke:#dae1e7;stroke-width:.15rem;fill:#88cdff}.bi.bi-diagram .bi-link-canvas-layer .bi-diagram-link{pointer-events:stroke}.bi.bi-diagram .bi-link-canvas-layer .bi-diagram-link .bi-link-path{stroke:#dae1e7;stroke-width:.25rem;pointer-events:stroke;fill:transparent;cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none}.bi.bi-diagram .bi-link-canvas-layer .bi-diagram-link .bi-link-ghost{pointer-events:stroke;stroke:transparent;stroke-width:1.2rem;fill:transparent;cursor:pointer}.bi.bi-diagram .bi-link-canvas-layer .bi-diagram-link:hover .bi-link-path{stroke:#88cdff;stroke-dasharray:10,2;animation:BiDashSegmentAnimation 1s linear infinite}.bi.bi-diagram .bi-link-canvas-layer .bi-diagram-link.readonly-link .bi-link-ghost{cursor:not-allowed}.bi.bi-diagram .bi-link-canvas-layer .bi-diagram-link.readonly-link .bi-link-path{cursor:not-allowed;stroke:#b8c2cc;stroke-dasharray:none}.bi.bi-diagram .bi-link-canvas-layer .bi-diagram-link.readonly-link:hover{stroke:#b8c2cc;stroke-dasharray:none;animation:none}.bi.bi-diagram .bi-link-canvas-layer .bi-diagram-link foreignObject{width:100%;height:100%;overflow:visible;pointer-events:none}.bi.bi-diagram .bi-link-canvas-layer .bi-diagram-link .bi-diagram-link-label{display:inline-block;color:#fff;background-color:#3d4852;border-radius:.25rem;padding:.25rem;text-align:center;font-size:14px;font-size:.875rem;-webkit-user-select:none;-ms-user-select:none;user-select:none;min-width:48px;min-width:3rem;transform:translate(-50%,-50%)}@keyframes BiDashSegmentAnimation{0%{stroke-dashoffset:24}to{stroke-dashoffset:0}}*,*:before,*:after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}body{font-family:\30d2\30e9\30ae\30ce\89d2\30b4  Pro W3,Hiragino Kaku Gothic Pro,\30e1\30a4\30ea\30aa,Meiryo,Osaka,\ff2d\ff33  \ff30\30b4\30b7\30c3\30af,MS PGothic,sans-serif;color:#fff!important;background:#282a37;font-size:11px}input{border:none;border-radius:2px}input:focus{outline:1px #00ff11 solidss}div.code-toolbar>.toolbar{top:-4px}a{padding:4px;cursor:pointer}a,a:visited{color:#fff}a:hover{opacity:.7}.fxlr0w0{height:100%;position:fixed;top:0;right:0;width:600px;z-index:200;box-shadow:1px 0 7px #00000080;transform:translate(100%);transition:transform .3s ease-out;background:#272822;padding-left:16px;padding-top:18px;overflow:scroll}.fxlr0w1{transform:translate(0)}.fxlr0w2{position:absolute;font-size:14px;top:8px;left:8px}.fxlr0w3{display:flex;flex-direction:column;width:160px;height:100vh;position:fixed;left:0;top:0;background:#333130;z-index:200}.fxlr0w4{height:100%;overflow:scroll;list-style:none;padding:12px 20px 0;margin:0}.fxlr0w5{margin:20px 20px 0;font-weight:700}.fxlr0w6{margin:20px 20px 0}.fxlr0w7{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fxlr0w8{margin-left:8px;color:inherit}.fxlr0w9{color:#0f1}.fxlr0wa{margin-left:160px}.fxlr0wb{background:#01060b;border-radius:4px;padding:10px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;box-shadow:2px 2px 4px #01060b}.fxlr0wb.active{border:solid 1px #00ff11}.fxlr0wc{margin-top:-10px;margin-left:auto;margin-right:auto;cursor:pointer}.fxlr0wc:hover{opacity:.7}.fxlr0wd{margin-bottom:-10px;margin-left:auto;margin-right:auto;cursor:pointer}.fxlr0wd:hover{opacity:.7}.fxlr0we{color:#fff;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.fxlr0wf{text-align:right}.bi.bi-diagram{background-color:#282a37!important;overflow:scroll!important;border:none!important;box-shadow:none!important}.bi.bi-diagram .bi-link-canvas-layer .bi-diagram-link .bi-link-path{stroke-width:.12rem}.line-highlight{background:linear-gradient(to right,hsla(124,120%,50%,.15) 100%,hsla(24,20%,50%,0))!important}