The tooltip component may cause some unhappiness

[ScSofts]

I have found that the Tootip component doesn't have an attribute that can set the style of the root. It makes my layout very messy. I solved it by making a new class inherited from it (Maybe it is ugly) .

class TooltipStyleable extends Tooltip{
    constructor(props){
        super(props);
        this.props = props;

    }

    render(){
        var __rest = (this && this.__rest) || function (s, e) {
            var t = {};
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
                t[p] = s[p];
            if (s != null && typeof Object.getOwnPropertySymbols === "function")
                for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
                    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                        t[p[i]] = s[p[i]];
                }
            return t;
        };
        var _this = this;
        var _a = this.props, verticalPosition = _a.verticalPosition, autoCloseTimeout = _a.autoCloseTimeout, autoClose = _a.autoClose, margin = _a.margin, horizontalPosition = _a.horizontalPosition, children = _a.children, content = _a.content, contentNode = _a.contentNode, closeDelay = _a.closeDelay, background = _a.background, className = _a.className, attributes = __rest(_a, ["verticalPosition", "autoCloseTimeout", "autoClose", "margin", "horizontalPosition", "children", "content", "contentNode", "closeDelay", "background", "className"]);
        var theme = this.context.theme;
        var tooltipStyle = this.getTooltipStyle();
        var classes = theme.prepareStyles({
            className: "tooltip",
            styles: {
                tooltip: tooltipStyle,
                root: { position: "relative", display: "inline-block",...this.props["rootstyle"] }
            }
        });
        return (React.createElement("div", Object.assign({}, classes.root, { ref: function (rootElm) { return _this.rootElm = rootElm; }, onMouseEnter: this.toggleShow, onClick: this.toggleShow, onMouseLeave: this.toggleHide }),
        React.createElement("span", Object.assign({ ref: function (tooltipElm) { return _this.tooltipElm = tooltipElm; } }, attributes, classes.tooltip), content || contentNode),
        children))
        }

};