尝试在React with MUI中使用useState在数组中的交替项上有条件地呈现css

import React, { useState } from 'react';
import { makeStyles } from '@mui/styles';

const useStyles = makeStyles((theme) => ({
  alternateItem: {
    backgroundColor: theme.palette.secondary.main,
    // 添加其他样式属性
  },
}));

const MyComponent = () => {
  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);
  const [showAlternate, setShowAlternate] = useState(false);
  const classes = useStyles();

  const toggleAlternate = () => {
    setShowAlternate(!showAlternate);
  };

  return (
    <div>
      <button onClick={toggleAlternate}>Toggle Alternate</button>
      {items.map((item, index) => (
        <div
          key={index}
          className={index % 2 === 1 && showAlternate ? classes.alternateItem : ''}
        >
          {item}
        </div>
      ))}
    </div>
  );
};