使用react-beautiful-dnd拖拽元素时列中出现异常黑点求助

这个黑点一般是浏览器默认的列表项标记，大概率是拖拽过程中临时元素继承了<ul>/<ol>/<li>这类列表标签的默认样式导致的，给你几个直接的解决办法：

• 重置列表默认样式：如果你的列组件用列表标签包裹拖拽项，直接通过CSS去掉列表标记和默认内边距：

  .your-column-wrapper ul, .your-column-wrapper ol {
    list-style: none;
    padding-left: 0;
  }
  

  把.your-column-wrapper替换成你实际的列容器类名即可。

• 针对拖拽元素单独处理：react-beautiful-dnd生成的拖拽克隆元素可能继承父级样式，给拖拽项容器添加样式强制隐藏标记：

  .draggable-item-container li {
    list-style-type: none;
  }
  

• 检查组件DOM结构：确认拖拽项没有被错误嵌套在<li>标签里（如果你的拖拽项本身不是列表项的话），多余的列表标签会触发浏览器默认的黑点样式，调整结构即可。

内容的提问来源于stack exchange，提问作者Juan Menendez