使用@sandstreamdev/react-swipeable-list时选项常显不符合预期怎么解决

问题根因 #

滑动操作按钮始终显示是因为你没有引入@sandstreamdev/react-swipeable-list配套的基础样式文件，该库的滑动显隐逻辑、层级控制都依赖自带的CSS实现，缺失样式就会出现按钮常驻的问题。

解决方案 #

• 第一步：在项目入口文件（如index.js/App.js）或者全局样式文件中引入依赖自带的样式：
  若在JS文件中引入：

  import '@sandstreamdev/react-swipeable-list/dist/styles.css';
  

  若在CSS文件中引入：

  @import '@sandstreamdev/react-swipeable-list/dist/styles.css';
  

• 第二步：如果引入样式后仍有异常，检查两个配置点：
  1. 组件结构是否符合规范：SwipeableList包裹SwipeableListItem，滑动操作内容分别传入SwipeableListItem的leftContent、rightContent属性，列表主体内容作为SwipeableListItem的子节点传入，不要手动将操作按钮直接写在页面DOM结构中。
  2. 你自定义的样式是否覆盖了库的默认配置：不要给列表主体内容设置低于操作按钮的z-index，也不要给操作按钮手动添加display: block、visibility: visible这类强制显示的属性。

内容的提问来源于stack exchange，提问作者Shashikanth Reddy