Material UIを利用して開発している際に、Listコンポーネントを利用して番号付きにしたい時に、調べたのでメモ書き。
JavaScript
import React from 'react';
import { List, ListItem, ListItemText } from '@/components/ui/list';
export default function NumberedList() {
const items = ['First Item', 'Second Item', 'Third Item', 'Fourth Item'];
return (
<List component="ol" sx={{
listStyleType: 'decimal',
pl: 4,
'& .MuiListItem-root': {
display: 'list-item',
}
}}>
{items.map((item, index) => (
<ListItem key={index}>
<ListItemText>{item}</ListItemText>
</ListItem>
))}
</List>
);
}
コメント