я делаю приложение на react js его суть в том, чтобы можно было загрузить excel таблицу и взять данные и отрисовать нужные вот код App.tsx import React from 'react';
import ExcelUploader from './components/ExcelUploader';

const App: React.FC = () => {
  return (
    <div>
      <h1>Excel File Uploader</h1>
      <ExcelUploader />
    </div>
  );
};

export default App;
 ExcelUploader.tsx import React, { useState } from 'react';
import * as XLSX from 'xlsx';

interface DataRow {
  [key: string]: string | number;
}

const ExcelUploader: React.FC = () => {
  const [data, setData] = useState<DataRow[]>([]);
  const [selectedItem, setSelectedItem] = useState<string | null>(null);

  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;

    const reader = new FileReader();

    reader.onload = (e) => {
      const arrayBuffer = e.target?.result;
      if (!(arrayBuffer instanceof ArrayBuffer)) return;

      const data = new Uint8Array(arrayBuffer);
      const binaryStr = data.reduce((acc, byte) => acc + String.fromCharCode(byte), '');

      const workbook = XLSX.read(binaryStr, { type: 'binary' });
      const sheetName = workbook.SheetNames[0];
      const worksheet = workbook.Sheets[sheetName];

      const jsonData: DataRow[] = XLSX.utils.sheet_to_json(worksheet);
      setData(jsonData);
    };

    reader.readAsArrayBuffer(file);
  };

  const getArtikulNameMap = () => {
    const artikulNameMap: { [key: string]: string } = {};
    data.forEach((item) => {
      const artikul = item['Артикул поставщика'] as string;
      const name = item['Название'] as string;
      artikulNameMap[artikul] = name;
    });
    return artikulNameMap;
  };

  const getUniqueArtikuls = () => {
    return Array.from(new Set(data.map((item) => item['Артикул поставщика'] as string)));
  };

  const calculateTotal = (key: string) => {
    const total = data.reduce((sum, item) => {
      if (!selectedItem || item['Артикул поставщика'] === selectedItem) {
        return sum + ((item[key] as number) || 0);
      }
      return sum;
    }, 0);

    return parseFloat(total.toFixed(2));
  };

  const artikulNameMap = getArtikulNameMap();

  const additionalColumns = [
    'Хранение',
    'Удержания',
    'Платная приемка',
    'Услуги по доставке товара покупателю',
  ];

  const calculateAdditionalServicesTotal = () => {
    return additionalColumns.reduce((total, colName) => total + calculateTotal(colName), 0);
  };

  const calculatePayout = () => {
    const totalToSeller = calculateTotal('К перечислению Продавцу за реализованный Товар');
    const additionalServicesTotal = calculateAdditionalServicesTotal();
    return parseFloat((totalToSeller - additionalServicesTotal).toFixed(2));
  };

  return (
    <div>
      <input type="file" accept=".xlsx, .xls" onChange={handleFileUpload} />

      <div>
        <h3>Артикул поставщика</h3>
        <ul>
          {getUniqueArtikuls().map((artikul) => (
            <li key={artikul || 'Все артикулы'} onClick={() => setSelectedItem(artikul)}>
              {artikul ? artikulNameMap[artikul] : ''} {artikul || 'Все артикулы'}
            </li>
          ))}
        </ul>
      </div>

      {selectedItem ? (
        <div>
          <h3>Детали для {selectedItem}</h3>
          <p>
            Общая сумма "К перечислению":{' '}
            {calculateTotal('К перечислению Продавцу за реализованный Товар')} руб.
          </p>
          <p>Продано: {calculateTotal('Кол-во')} шт.</p>
        </div>
      ) : (
        <div>
          <h3>Все</h3>
          <p>
            Общая сумма "К перечислению":{' '}
            {calculateTotal('К перечислению Продавцу за реализованный Товар')} руб.
          </p>
          <p>Продано: {calculateTotal('Кол-во')} шт.</p>
        </div>
      )}

      <div>
        <h3>Общая сумма дополнительных услуг</h3>
        <ul>
          {additionalColumns.map((colName) => (
            <li key={colName}>
              {colName}: {calculateTotal(colName)} руб.
            </li>
          ))}
        </ul>
      </div>

      <div>
        <h3>К выплате</h3>
        <p>{calculatePayout()} руб.</p>
      </div>
    </div>
  );
};

export default ExcelUploader;
теперь мне нужно сделать стилизацию , откуда можно взять пример красивого дизайна стилей для моего приложения?