FluentUI detailsList with groups - 有没有办法防止选择组行答案

【问题标题】：FluentUI detailsList with groups - is there a way to prevent the group row from being selectedFluentUI detailsList with groups - 有没有办法防止选择组行
【发布时间】：2021-04-13 09:13:12
【问题描述】：

我看了一下fluentUI官方页面中的fluent detailsList分组示例： https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/grouped

并稍微编辑了他们的示例，使某些组有 1 行

现在，当我选择行中的项目时，组行（组标题）也被选中

我想阻止这种情况。有什么办法吗？

【问题讨论】：

标签： javascript reactjs frontend fluent-ui

【解决方案1】：

一个快速的解决方法是使用 CSS：

如果一个元素有ms-GroupHeader is-selected 类，意味着它是一个组头并且被选中，所以你改变设置背景颜色。

您可能可以将 className 传递给像 this 这样的组组件

【讨论】：

谢谢，我们最终做了：.is-selected.ms-GroupHeader{ background: none!important; } 所以如果你想编辑你的答案我会接受它
@NoIdeaForName 我没有说要使用 ms-GroupHeader is-selected 作为 css 选择器（我不够清楚）。我的意思是，如果一个元素具有这两个类（转换为 .is-selected.ms-GroupHeader 选择器）是您想要覆盖其样式的元素。但要小心，使用该选择器会影响所有组标题，因此您可能希望传递一个自定义类以更好地控制受影响或不受影响的内容（如您在 codepen 中看到的）。你也可以避免!important。很高兴它有帮助。