убрать в дереве svg не создавая новый класс

131
28 октября 2019, 05:30

Имеется класс, мне надо сделать так, чтобы в 1 дереве была показана svg, а в другом она пряталась. Как можно сделать, не создавая новый класс?

.main-tree-organization > ul > .tree-element > div > div > svg:first-child { 
    display: none !important; 
}
return connectDropTarget(connectDragSource( 
            <div className={this.props.edit ? "" : "tree-element"} style={style}> 
                <div 
                    style={ 
                        !this.props.id[0] ? 
                            { 
                                color: '#4a4293', 
                                padding: "0 0 5px 10px", 
                                fontWeight: 400, 
                                display: 'flex' 
                            } : 
                        this.props.opened && (this.props.childrens.length || (this.props.users ? this.props.users.length : '')) > 0 ? 
                            { 
                                color: '#4a4293', 
                                padding: "0 0 5px 25px", 
                                flexGrow: 1, 
                                display: 'flex', 
                                flexDirection: 'column', 
                                fontWeight: 400 
                            } : 
                            this.props.childrens ? (this.props.childrens && this.props.childrens.length > 0 || this.props.users && this.props.users.length > 0) ? 
                                { 
                                    padding: "0 0 5px 25px", 
                                    flexGrow: 1, 
                                    display: 'flex', 
                                    flexDirection: 'column', 
                                    color: '#8b8b92', 
                                    fontWeight: 300 
                                } : 
                                { 
                                    padding: "0 0 5px 25px", 
                                    flexGrow: 1, 
                                    display: 'flex', 
                                    flexDirection: 'column', 
                                    color: '#8b8b92', 
                                    fontWeight: 300, 
                                    position: 'relative', 
                                    left: -15 
                                } : {} 
                    } 
                     
                     
                     
                     
                     
                     
                     
                     
                    return connectDropTarget(connectDragSource( 
                <div 
                    className={this.props.edit ? "" : verifications(this.isAccept(this.props.id, contacts)) ? "tree-element add-for-chat disabled-access" : "tree-element add-for-chat"} 
                    onClick={e => { 
                        this.props.toggleNode(this.props.id, this.props.stateIsOpenNodeTree, true); 
                    }} 
                > 
                    <div 
                        style={opened && (this.props.childrens.length || (this.props.users ? this.props.users.length : '')) > 0 ? 
                            { 
                                color: '#4a4293', 
                                padding: "0 0 0px 25px", 
                                flexGrow: 1, 
                                display: 'flex', 
                                flexDirection: 'column', 
                                position: 'initial', 
                                width: '85%', 
                                fontWeight: 400 
                            } : 
                            this.props.childrens ? (this.props.childrens && this.props.childrens.length > 0 || this.props.users && this.props.users.length > 0) ? 
                                { 
                                    padding: "0 0 0px 25px", 
                                    flexGrow: 1, 
                                    display: 'flex', 
                                    flexDirection: 'column', 
                                    position: 'initial', 
                                    width: '85%', 
                                    color: '#8b8b92', 
                                    fontWeight: 300 
                                } : 
                                { 
                                    padding: "0 0 0px 25px", 
                                    flexGrow: 1, 
                                    display: 'flex', 
                                    flexDirection: 'column', 
                                    color: '#8b8b92', 
                                    width: '85%', 
                                    fontWeight: 300, 
                                    position: 'relative', 
                                    left: '-15' 
                                } : {}} 
                    > 
                        {this.props.id !== 0 ? 
                            !((this.props.childrens && this.props.childrens.length > 0) || (this.props.users && this.props.users.length > 0)) 
                                ? '' 
                                : opened 
                                ? open 
                                : (this.props.childrens && this.props.childrens.length > 0 || this.props.users && this.props.users.length > 0) 
                                    ? close 
                                    : '' : 
                            <div id="logo-company-to-structure" style={{backgroundImage: 'url(' + logo + ')'}}></div> 
                        } 
 
                        {this.props.edit ? 
                            '' 
                            : 
                            <div 
                                style={this.props.name ? this.props.name.length > 48 ? { 
                                        paddingTop: 0, 
                                        wordBreak: 'break-all', 
                                        overflow: 'hidden', 
                                        height: '35px', 
                                        display: 'flex', 
                                        alignItems: 'center' 
                                    } : 
                                    { 
                                        paddingTop: 0, 
                                        wordBreak: 'break-all', 
                                        position: 'initial', 
                                        display: 'flex', 
                                        alignItems: 'center' 
                                    } : ''} 
                            >{this.props.type !== 'POSITION' ? 
                                <IconGroup 
                                    style={opened && (this.props.childrens.length || (this.props.users ? this.props.users.length : {})) > 0 ? { 
                                            color: '#4a4293', 
                                            height: 20, 
                                            width: 20, 
                                            position: 'absolute', 
                                            left: 25, 
                                            top: 11 
                                        } : 
                                        { 
                                            color: 'darkgrey', 
                                            height: 20, 
                                            width: 20, 
                                            position: 'absolute', 
                                            left: 25, 
                                            top: 11 
                                        }}/>                     
                                         
                                         
                                         
                                        

READ ALSO
Как отменить overflow:hidden, для дочернего элемента

Как отменить overflow:hidden, для дочернего элемента

Есть вот такая вёрстка которую нельзя ломать

157
Задержка показа блока

Задержка показа блока

Хочу сделать элемент задержки показа блока на 5 секундТоесть загрузили страницу и через 5 секунд появился блок с линками и т

128
Как создать элемент на пустой странице на js [закрыт]

Как создать элемент на пустой странице на js [закрыт]

Для примера, есть пустая страница на html, кроме тега script на ней ничего нетПодскажите как создать на ней блок или абзац

129