@antv/s2-react/dist/s2-react.min.css

use S2 with react

.antv-s2-html-icon{display:inline-block}.antv-s2-html-icon svg{width:12px;height:12px}.antv-s2-dark-theme{--antv-s2-background: #000;--antv-s2-tooltip-background: rgba(43, 43, 43, .95);--antv-s2-tooltip-operator-background: rgba(43, 43, 43, .95);--antv-s2-tooltip-operator-menu-selected-background: #1677ff;--antv-s2-container-background: #191919;--antv-s2-block-background: #232323;--antv-s2-font: #fff;--antv-s2-font-95: rgba(255, 255, 255, .95);--antv-s2-font-90: rgba(255, 255, 255, .9);--antv-s2-font-85: rgba(255, 255, 255, .85);--antv-s2-font-80: rgba(255, 255, 255, .8);--antv-s2-font-75: rgba(255, 255, 255, .75);--antv-s2-font-70: rgba(255, 255, 255, .7);--antv-s2-font-65: rgba(255, 255, 255, .65);--antv-s2-font-60: rgba(255, 255, 255, .6);--antv-s2-font-55: rgba(255, 255, 255, .55);--antv-s2-font-50: rgba(255, 255, 255, .5);--antv-s2-font-45: rgba(255, 255, 255, .45);--antv-s2-font-40: rgba(255, 255, 255, .4);--antv-s2-font-35: rgba(255, 255, 255, .35);--antv-s2-font-30: rgba(255, 255, 255, .3);--antv-s2-font-25: rgba(255, 255, 255, .25);--antv-s2-font-20: rgba(255, 255, 255, .2);--antv-s2-font-15: rgba(255, 255, 255, .15);--antv-s2-font-10: rgba(255, 255, 255, .1);--antv-s2-font-5: rgba(255, 255, 255, .05);--antv-s2-border: rgba(255, 255, 255, .15);--antv-s2-divider: rgba(255, 255, 255, .1)}.antv-s2-tooltip-container{position:fixed;user-select:text;min-width:200px;max-width:640px;max-height:100vh;overflow:auto;z-index:1024;display:inline-block;background:var(--antv-s2-tooltip-background, rgba(255, 255, 255, .95));border-radius:4px;box-shadow:0 1px 4px #0003;font-size:12px;font-family:Roboto,PingFang SC,Chinese Quote,Segoe UI,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif}.antv-s2-tooltip-container-hide{opacity:0;visibility:hidden;pointer-events:none}.antv-s2-tooltip-container-hide *{transition:none}.antv-s2-tooltip-container-show{opacity:1;visibility:visible;pointer-events:all}.antv-s2-tooltip-tips,.antv-s2-tooltip-name{padding:12px;line-height:16px;overflow-wrap:break-word;color:var(--antv-s2-font-85, rgba(0, 0, 0, .85))}.antv-s2-tooltip-description{padding:0 12px 12px;line-height:16px;overflow-wrap:break-word;color:var(--antv-s2-font-45, rgba(0, 0, 0, .45))}.antv-s2-tooltip-tips{padding:4px 12px;color:var(--antv-s2-font-45, rgba(0, 0, 0, .45))}.antv-s2-tooltip-infos{padding:4px 12px;line-height:20px;color:var(--antv-s2-font-45, rgba(0, 0, 0, .45));overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow-wrap:break-word;background:#f9f9f9f5;border-radius:0 0 2px 2px;background-color:#f9f9f9}.antv-s2-tooltip-summary{line-height:20px;color:var(--antv-s2-font-65, rgba(0, 0, 0, .65));overflow:hidden;padding:12px}.antv-s2-tooltip-summary-item{display:flex}.antv-s2-tooltip-summary-key{margin-right:20px}.antv-s2-tooltip-summary-val{flex:1;text-align:right;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.antv-s2-tooltip-interpretation{color:#000000a6;overflow:hidden;padding:12px}.antv-s2-tooltip-interpretation+.antv-s2-tooltip-head-info-list{border-top:1px solid var(--antv-s2-border, #e9e9e9)}.antv-s2-tooltip-interpretation .antv-s2-tooltip-interpretation-head{margin-bottom:12px}.antv-s2-tooltip-interpretation .antv-s2-tooltip-interpretation-head .antv-s2-tooltip-interpretation-icon{width:14px;height:14px}.antv-s2-tooltip-interpretation .antv-s2-tooltip-interpretation-head .antv-s2-tooltip-interpretation-name{color:var(--antv-s2-font, #000)}.antv-s2-tooltip-head-info-list{color:var(--antv-s2-font-65, #a2a2a2);padding:12px 12px 4px;line-height:24px;word-break:break-word}.antv-s2-tooltip-bold,.antv-s2-tooltip-selected{font-weight:700}.antv-s2-tooltip-selected{margin-right:5px}.antv-s2-tooltip-highlight{color:var(--antv-s2-font-85, rgba(0, 0, 0, .85))}.antv-s2-tooltip-detail-list{padding:2px 12px 8px}.antv-s2-tooltip-detail-list .antv-s2-tooltip-detail-item{color:var(--antv-s2-font-65, rgba(0, 0, 0, .65));overflow:hidden;margin:4px 0;display:flex;justify-content:space-around;align-items:center}.antv-s2-tooltip-detail-list .antv-s2-tooltip-detail-item-key{margin-right:20px}.antv-s2-tooltip-detail-list .antv-s2-tooltip-detail-item-val{flex:1;text-align:right;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ant-dropdown-menu-item.operation-item{font-size:12px}.antv-s2-wrapper{padding:0;margin:0;display:flex;flex-direction:column;height:100%}.antv-s2-container{overflow:auto;flex:1 1 auto}.antv-s2-edit-cell{position:absolute;box-shadow:0 0 0 2px #2a83fa!important;resize:none;box-sizing:border-box;background-color:var(--antv-s2-background, #fff);margin:0;padding:4px 11px;color:#000000e0;font-size:14px;min-width:0;border-radius:6px;list-style:none;vertical-align:bottom;transition:all .3s,height 0s;min-height:32px}.antv-s2-edit-cell:hover{border-color:#4096ff;background-color:#fff}.antv-s2-edit-cell:focus,.antv-s2-edit-cell:focus-within{border-color:#1677ff;outline:0;background-color:#fff}.antv-s2-drag-copy-mask{position:absolute;top:-4px;left:-4px;z-index:9;background-color:#c2d5fe80;cursor:crosshair}.antv-s2-drag-copy-point{position:absolute;z-index:9;width:8px;height:8px;background-color:#c2d5fe;cursor:crosshair;user-select:none}.antv-s2-strategy-sheet-tooltip{line-height:20px;font-size:12px;color:var(--antv-s2-font-65, rgba(0, 0, 0, .65));overflow:hidden;padding:12px}.antv-s2-strategy-sheet-tooltip ul,.antv-s2-strategy-sheet-tooltip li{list-style:none;margin:0;padding:0}.antv-s2-strategy-sheet-tooltip .antv-s2-strategy-sheet-tooltip-divider{border-top:1px solid var(--antv-s2-border, #e9e9e9);margin:10px -12px}.antv-s2-strategy-sheet-tooltip .antv-s2-strategy-sheet-tooltip-description{overflow-wrap:break-word}.antv-s2-strategy-sheet-tooltip.antv-s2-strategy-sheet-tooltip-row .antv-s2-strategy-sheet-tooltip-value{font-weight:700}.antv-s2-strategy-sheet-tooltip.antv-s2-strategy-sheet-tooltip-col .antv-s2-strategy-sheet-tooltip-name{margin-right:20px}.antv-s2-strategy-sheet-tooltip.antv-s2-strategy-sheet-tooltip-col .antv-s2-strategy-sheet-tooltip-value{color:var(--antv-s2-font-85, rgba(0, 0, 0, .85))}.antv-s2-strategy-sheet-tooltip.antv-s2-strategy-sheet-tooltip-data .antv-s2-strategy-sheet-tooltip-header{display:flex;justify-content:space-between;align-items:center}.antv-s2-strategy-sheet-tooltip.antv-s2-strategy-sheet-tooltip-data .antv-s2-strategy-sheet-tooltip-header .header-label{font-weight:700;margin-right:20px}.antv-s2-strategy-sheet-tooltip.antv-s2-strategy-sheet-tooltip-data .antv-s2-strategy-sheet-tooltip-original-value{text-align:right}.antv-s2-strategy-sheet-tooltip.antv-s2-strategy-sheet-tooltip-data .antv-s2-strategy-sheet-tooltip-derived-values{position:relative;margin:0;padding:0;list-style:none}.antv-s2-strategy-sheet-tooltip.antv-s2-strategy-sheet-tooltip-data .antv-s2-strategy-sheet-tooltip-derived-values li.derived-value-item{display:flex;justify-content:space-between;align-items:center}.antv-s2-strategy-sheet-tooltip.antv-s2-strategy-sheet-tooltip-data .antv-s2-strategy-sheet-tooltip-derived-values li.derived-value-item .derived-value-group{color:var(--antv-s2-font-65, rgba(0, 0, 0, .65));margin-left:10px}.antv-s2-strategy-sheet-tooltip.antv-s2-strategy-sheet-tooltip-data .antv-s2-strategy-sheet-tooltip-derived-values li.derived-value-item .derived-value-group .derived-value-trend-icon{display:inline-block;width:0;height:0;margin-right:4px;border-right:4px solid transparent;border-bottom:9px solid var(--antv-s2-font, #000);border-left:4px solid transparent;transform:rotate(0)}.antv-s2-strategy-sheet-tooltip.antv-s2-strategy-sheet-tooltip-data .antv-s2-strategy-sheet-tooltip-derived-values li.derived-value-item .derived-value-group.derived-value-trend-up{color:#f46649}.antv-s2-strategy-sheet-tooltip.antv-s2-strategy-sheet-tooltip-data .antv-s2-strategy-sheet-tooltip-derived-values li.derived-value-item .derived-value-group.derived-value-trend-up .derived-value-trend-icon{border-bottom-color:#f46649}.antv-s2-strategy-sheet-tooltip.antv-s2-strategy-sheet-tooltip-data .antv-s2-strategy-sheet-tooltip-derived-values li.derived-value-item .derived-value-group.derived-value-trend-down{color:#2aa491}.antv-s2-strategy-sheet-tooltip.antv-s2-strategy-sheet-tooltip-data .antv-s2-strategy-sheet-tooltip-derived-values li.derived-value-item .derived-value-group.derived-value-trend-down .derived-value-trend-icon{transform:rotate(180deg);border-bottom-color:#2aa491}.antv-s2-strategy-sheet-tooltip.antv-s2-strategy-sheet-tooltip-data .antv-s2-strategy-sheet-tooltip-derived-values li.derived-value-item .derived-value-group .derived-value-original{margin-left:4px}