Material UI自动完成列表框样式没有影响

Question

我有一个自动补全，它有groupBy标题。我试图使第一组与其他组的高度不同。ul组件没有唯一标识符，因此使用以下方法更新样式

'& .MuiAutocomplete-listbox > li:nth-of-type(1) > ul': {
maxHeight: '208px',
overflowX: 'hidden',
overflowY: 'auto',
},

这似乎没有影响。

与此同时，我遇到https://github.com/mui/material-ui/issues/32540，提到有一个bug，但找不到更多的细节。

任何线索都会有帮助。TIA

Answer 1

可以通过遵循MUI文档中的一些想法来选择性地对第一个组头进行样式化。

为了演示，使用Autocomplete Group By示例，带类别。有一个实时演示和源代码。

MUI的示例使用如下:

1。选择

一个选项数组，其中每个选项对象都增加了一个firstLetter属性:

const options = top100Films.map((option) => {
const firstLetter = option.title[0].toUpperCase();
return {
firstLetter: /[0-9]/.test(firstLetter) ? '0-9' : firstLetter,
...option,
};
});

2。自动完成选项属性

Autocomplete options属性分配给一个按firstLetter排序的选项数组。

...
<Autocomplete
id="grouped-demo"
options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}
groupBy={(option) => option.firstLetter}
...

排序代码(options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter)))应该在组件的return语句之前执行。排序的结果应该分配给一个变量(例如sortedOptions)。)与组件作用域。这意味着sortedOptions对于使用自动完成的组件中定义的任何函数都应该是可见的。修改完成后，上面的代码看起来像这样:

...
<Autocomplete
id="grouped-demo"
options={ sortedOptions }
groupBy={(option) => option.firstLetter}
...

3。自动完成renderGroup属性

renderGroup属性分配给包含自定义GroupHeader组件的组件，使用styled.

...
renderGroup={(params) => (
<li key={params.key}>
<GroupHeader>{params.group}</GroupHeader>
<GroupItems>{params.children}</GroupItems>
</li>
)}
...

第一个组头

有了这三个想法，可以使用firstLetter属性和styles中的props来查找First Group Header。更新MUI示例中的GroupHeader组件定义，如下所示:

const GroupHeader = styled('div')(({ theme, ...props }) => {
let isFirstGroup = sortedOptions[0].firstLetter === props.children;
return {
position: 'sticky',
top: '-8px',
height: isFirstGroup ? '100px' : 'inherit', // Sample adjustment for the First Group.
padding: '4px 10px',
color: theme.palette.primary.main,
backgroundColor:
theme.palette.mode === 'light'
? lighten(theme.palette.primary.light, 0.85)
: darken(theme.palette.primary.main, 0.8),
}
});

这可以工作，因为自动完成renderGroup回调函数具有以下签名:

:

function( params: AutocompleteRenderGroupParams ) => ReactNode

自动完成将params传递给回调。它是一个对象，表示要呈现的组:

let params = {
group: a string representing a group name
children: a collection of list items that belong to the group
};

renderGroup遍历传递给groupBy属性的元素数组，为renderGroup回调提供一个param对象，该对象看起来像这样(假设组名以字母"a"开头):

param = {
group: 'A',
children: ...
};

因此，看起来像这样的代码行:<GroupHeader>{params.group}</GroupHeader>实际上呈现了:<GroupHeader>{'A'}</GroupHeader>.

由于'A'是GroupHeader的子元素，我们可以使用这个let isFirstGroup = sortedOptions[0].firstLetter === props.children;来提取'A'(props.children === 'A')，并将其与sortedOptions数组中第一个元素的firstLetter属性进行比较。