antd中的tree组件样式修改 react

最新推荐文章于 2024-10-04 17:00:22 发布

qq_46698519

最新推荐文章于 2024-10-04 17:00:22 发布

阅读量281

点赞数 1

文章标签： react.js javascript 前端 css

本文链接：https://blog.csdn.net/qq_46698519/article/details/142356632

版权

react的中普通的树结构已经不满足样式的要求了，修改样式就得从组件内部的类名下手了，原来的样式,就是tree组件的普通样式：

修改后的样式：

树形结构需要进行展开折叠，所以这些情况都要考虑，插入一个图片需要用到：：before进行插入，具体修改如下：


            >.ant-tree>.ant-tree-list>.ant-tree-list-holder>div>.ant-tree-list-holder-inner>.ant-tree-treenode {
                box-sizing: border-box;
                height: 56px;
                display: flex;
                align-items: center;
                font-size: 16px;
                border-top: 8px solid #f4f7fb;
                border-bottom: 8px solid #f4f7fb;
                box-shadow: 0 1px 1px 0 #161f520f;
                position: relative;
                padding-top: 6px;

                .ant-tree-draggable-icon {
                    display: none;

                }

                .ant-tree-switcher-noop {
                    display: none;
                }

                .ant-tree-switcher_open {
                    position: relative;
                }






            }

            .ant-tree-title {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 90%;
            }

            .ant-tree-node-content-wrapper-normal {
                display: flex;
                align-items: center;
                position: relative;

                &:before {
                    content: '';
                    display: inline-block;

                    width: 12px;
                    height: 12px;

                    border-radius: 5px;
                    padding: 20px 15px 20px 25px;
                    background: #dce3ec url('./img/lock.png') center center no-repeat;
                    background-size: 12px 12px;
                    position: absolute;
                    left: 0;
                    z-index: 99;
                    transition: all 1s;

                }


                .ant-tree-title {
                    position: absolute;
                    left: 52px;
                }
            }

            .ant-tree-node-content-wrapper-open {
                display: flex;
                align-items: center;
                position: relative;

                &:before {
                    content: '';
                    display: inline-block;

                    width: 12px;
                    height: 12px;
                    border-radius: 5px;
                    padding: 20px 15px 20px 25px;
                    // background: #2a64ff url('./img/highLock.png') center center no-repeat;
                    background: #dce3ec url('./img/lock.png') center center no-repeat;
                    background-size: 12px 12px;
                    position: absolute;
                    left: 0;
                    z-index: 99;
                }

                .ant-tree-title {
                    position: absolute;
                    left: 52px;
                }
            }

            .ant-tree-node-content-wrapper-close {
                display: flex;
                align-items: center;
                position: relative;

                &:before {
                    content: '';
                    display: inline-block;

                    width: 12px;
                    height: 12px;

                    border-radius: 5px;
                    padding: 20px 15px 20px 25px;
                    background: #dce3ec url('./img/lock.png') center center no-repeat;

                    background-size: 12px 12px;
                    position: absolute;
                    left: 0;
                    z-index: 99;
                }

                .ant-tree-title {
                    position: absolute;
                    left: 52px;
                }
            }


            .ant-tree-node-selected {
                &:before {
                    content: '';
                    display: inline-block;

                    width: 12px;
                    height: 12px;

                    border-radius: 5px;
                    padding: 20px 15px 20px 25px;

                    background: #2a64ff url('./img/highLock.png') center center no-repeat;

                    background-size: 12px 12px;
                    position: absolute;
                    left: 0;
                    z-index: 99;
                    transition: all 1s;
                }
            }

            .ant-tree-switcher ant-tree-switcher_open {
                position: relative;
                z-index: 9999;
            }

            .ant-tree-node-selected {

                padding: 20px 0;

                border-radius: 8px !important;

                border: 1px solid #2A64FF;
                border-left: 0;

                background-color: #eef3ff !important;
                color: #202642;


            }