【React】Material UIのListコンポーネントを数字付きリストにする方法

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>
  );
}