React+antd3的ToolTip组件设置自定义样式不生效

350 阅读1分钟

在工作过程中用到了很多ToolTip的组件,很多情况下直接用就行了,但是内部展示需要定制的时候,发现文档中的overlayStyle跟overlayClassName并不生效

在这个场景中,我需要hover展示的文本内容过多,大概有16k左右的文本,所以ToolTip的盒子需要自适应高度,带滚动条,这个倒是好弄,但是产品要求hover效果宽度增加,然后我设置了overlayStyle和overlayClassName的width都没法生效。在网上查询相关资料,发现要设置minWidth跟minHeight才会生效,同样的,类名也是一样设置minWidth和minHeight才会生效

              <Tooltip
                placement="left"
                overlayStyle={{ minWidth: '600px' }}
                title={() => {
                  return (
                    <div
                      style={{
                        minHeight: 100,
                        maxHeight: 600,
                        overflow: 'auto'
                      }}
                    >
                      {text}
                    </div>
                  );
                }}
              >
                {text && text.slice(0, 100) + '...'}
              </Tooltip>