react中引入rc-tree和rc-tree-select库之后样式覆盖问题

最新推荐文章于 2024-05-16 09:56:13 发布
最新推荐文章于 2024-05-16 09:56:13 发布
阅读量1k 收藏
点赞数
分类专栏： React 文章标签： react.js 前端 reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42397018/article/details/121162025
版权

问题

在项目中同时引入rc-tree和rc-tree-select库之后，同时在全局样式文件global.less中分别引入两个库的样式文件
在这里插入图片描述
这时我们打开页面之后会发现rc-tree的样式没有正常显示，而且无法展开树结构
在这里插入图片描述
可是下面这样才是正常显示
在这里插入图片描述
而此时rc-tree-select组件库却能够正常显示
在这里插入图片描述
当我们调整全局样式文件中两个库的样式引入顺序，会发现谁后引入谁就可以正常显示。猜测可能是发生了样式覆盖

解决

在这里插入图片描述
在这里插入图片描述

同样也可以在使用rc-tree-select的组件中这样做，如果是其他的有样式冲突库同样的解决方法也使用

weixin_42397018
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react树控件rc-tree使用简介
pkpk20044的博客
03-07 2万+
今天为大家介绍一个比较好用的react树控件rc-tree(貌似是某宝制作的react树控件) rc-tree的github网址：https://github.com/react-component/tree rc-tree的部分功能如下图所示： 那么，就让我们一步步实现上图中的Tree以及相关功能 第一步：安装rc-tree     打开控制台输入npm install r
tree-select:React树选择
04-28
rc-树选择 React TreeSelect组件 屏幕截图 发展 npm install npm start 例子 在线示例： : 安装 原料药 TreeSelect道具 名称 描述 类型 默认 班级名称 根dom节点的其他CSS类 细绳 '' 前缀Cls 前缀类 细绳 '' 动画片 下拉动画名称。 现在仅支持向上滑动 细绳 '' transitionName 下拉CSS动画名称 细绳 '' choiceTransitionName 多种模式下选定项目CSS动画名称 细绳 '' dropdownMatchSelectWidth 下拉式选单是否与select相同。 默认设置的min-width与输入相同 布尔 -- dropdownClassName 附加的className应用于下拉菜单 细绳 -- dropdownStyle 应用于下拉菜单的其他样
标题： 提升开发效率：RC-SELECT —— React的智能选择组件
最新发布
gitblog_00079的博客
05-16 409
标题：???? 提升开发效率：RC-SELECT —— React的智能选择组件 ???? 项目地址:https://gitcode.com/react-component/select 1、项目介绍 rc-select 是一个基于React的高效、灵活的选择框组件，它提供了多种交互模式，包括单选、多选和组合框等。这个组件旨在为开发者提供强大的功能，同时保持简洁的API和优秀的用户体验。与传统的select元...
rc-tree的使用
qq_41632427的博客
08-10 123
rc-tree的使用大家好我是歌谣最近还是一直在研究react-admin和material ui这一套 自己需要手动去做一个树状组件 所以这边找到了一个插件依赖 rc-tree安装过程 yarn add rc-tree简单使用 const STYLE = ` .rc-tree-child-tree { display: block; } .node-motion { ...
最好用的 6 个 React Tree select 树形组件测评与推荐
蒋川@卡拉云
06-06 3113
React 树形选择器（React tree select）组件在搭建 React 的 app 中特别常用，React tree select 除了简单的树形结构外，还有非常多样的功能来配合不同场景的使用。比如搜索过滤，前端添加删除树枝，前端编辑修改子树名，拖拽排序，对用户操作事件记录等。本文记录了我自己使用多年最好用的 6 款 React tree select 组件，每一款都经过我实际测试，推荐给大家。...
rrcf算法的初步理解
ningyanggege的博客
05-15 2284
rrcf算法的原理
react-checkbox-tree:一个简单而优雅的React复选框树
05-12
注–此库使用了样式，并希望将它们加载到浏览器中。 包括CSS 为了方便起见，可以使用以下文件之一来使用库的样式： node_modules/react-checkbox-tree/lib/react-checkbox-tree.css node_modules/react-checkbox...
react-editable-json-tree:React可编辑的Json树
05-17
React可编辑的Json树演示版演示在这里可用：特征杰森查看器通过功能折叠节点的可能性添加新的节点值删除节点值更新节点值隐式转换新值（{}表示对象，[]表示数组，true表示布尔值，...） 通过功能样式只读的可能性...
react-org-tree:on基于react的简单组织树组件
05-01
react-org-tree A simple organization tree component based on react If you are using vue, see Installation # use npm npm i react-org-tree # use yarn yarn add react-org-tree Usage import OrgTree from '...
react-virtualized-tree:使用react的虚拟化树视图组件
04-29
react-virtualized-tree是建立在之上的树视图react库 其主要目标是以美观，快速的方式显示树状数据。 作为React式库，它使用子函数来实现最大的可扩展性。 其背后的核心思想是，只要使用自己的组件或由树导出的组件...
react-sortable-tree：用于嵌套数据和层次结构的拖放式可排序组件
02-05
React可排序树 一个用于对分层数据进行拖放式可排序表示的React组件。 查看，以演示一些基本功能和高级功能。 目录 入门 使用npm安装react-sortable-tree 。 # NPM npm install react-sortable-tree --save # YARN...
react-select-tree:该组件可帮助您逐步，逐级选择树状数据结构的元素
05-14
React选择树 该组件可帮助您逐步，逐级选择树状数据结构的元素 存储库本身尚未移动到单独的npm软件包。 因此，它包含该组件的源代码以及主要App.js组件内的几个示例。 例子 假设您正在使用市场，并且正在寻找来自某些特定类别或子类别的广告。 < MultipleSelectConsumer xss=removed> { ( addItem , removeItem , selection ) => ( < MultistepSelect data = { dummyData } selection = { selection } onConfirm = { addItem } onRemove = { removeItem } selectedListComponent
React-rcselect一个完美的ReactSelect组件
08-14
rc-select 一个完美的React Select组件
antd-design treeselect 默认显示树
weixin_45190306的博客
11-17 4259
需求是默认一进去显示整棵树，但是在antd-design（https://ant.design/components/tree-select-cn/）默认都是收起来的，没有API满足这个需求；本想用原来的tree树，但是循环起来太麻烦了；而且也找不到对应展开树的方法，被封装的太深了。 后面终于找到了对应的API，只是antd-design没有写而已。 <TreeSelect style=...
treeselect只选了分支节点全选_React计算antd的TreeSelect组件所选中的子节点数量
weixin_39844284的博客
12-20 1337
antd的TreeSelect组件在处理例如公司层级、学科系统、分类目录等等的树形选择需求时很好用。在使用这个组件时，我们往往需要获取所选中的所有节点以及所选中的所有子节点的数量。查看TreeSelect的api找到了组件的选中回调方法onChange在理解onChange方法的参数含义前，要先知道TreeSelect组件的数据格式onChange方法有三个参数，value表示所选中的节点的val...
antd treeSelect多选实现勾父不勾子
weixin_42302145的博客
01-18 2471
antd 自定义treeSelect实现勾选父节点时不勾选子节点，勾选子节点则勾选父节点，取消勾选父节点则取消勾选子节点
Antd Select选择器 treeSelect 选择树 解决异步数据无法设置默认值
山外小楼
09-29 2470
Antd Select选择器 treeSelect 选择树 解决异步数据无法设置默认值
antd TreeSelect （ 父级原因禁用，子级原因可选 ）
sakura的博客
02-21 2109
antd TreeSelect （ 父级原因禁用，子级原因可选 ）
react-native实现树结构选择组件
suwu150
06-18 6699
能够按照数据结构进行展开树状结构，通常用来进行展示具有明显层级关系的数据结构,展示的同时,能够进行指定默认值展开和默认选中值,能够进行单选和多选操作,进行通过传递props禁止选择等功能。
react-sortable-tree
08-21
react-sortable-tree是一个用于构建可排序的树状结构的React组件库。它提供了许多功能和交互方式，使用户可以轻松地对树进行排序、拖放和编辑操作。 首先，react-sortable-tree支持对树节点进行拖动和重新排序。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值