如何使用 react scss 为上方和下方列表中的元素及其后续元素设置不同的样式

Question

output应该是这样的 我能够在所选元素和其他后续元素下方以不同方式实现颜色，但我无法为所选元素的上述元素做到这一点我的反应组件

import React, { useState } from 'react'
import './App.scss'

function App() {
 
   const [list] = useState([{
      time:'10:00',
      selected:false,
   },{
      time:'10:30',
      selected:false,
   },{
      time:'11:00',
      selected:false,
   },{
      time:'11:30',
      selected:true,
   },{
      time:'12:00',
      selected:false,
   },{
      time:'12:30',
      selected:false,
   },{
      time:'01:00',
      selected:false,
   }]);

  return (
   <div className='container'>
<ul className='list'>
   {list.map((item) => (
     <li
       key={item.id}
       className={`item ${item.selected === true ? "selected" : ""}`}
     >
       {item.time}
     </li>
   ))}
 </ul>
   </div>
   
  );
}


export default App

这是 scss 代码

.list{
    display: flex;
    list-style: none;
    margin: 0;
    flex-direction: column;
}
.item{
    display: flex;
    margin: 5px;
    font-weight: 500;
    font-size: 19px;
    line-height: 28px;
    letter-spacing: 0.35px;
    background-color: black;
    color: white;
    &.selected{
        font-weight: 500;
        font-size: 22px;
        line-height: 28px;
        letter-spacing: 0.35px;
        background-color: black;
        color: white;
        &.selected + .item:nth-child(n + 1) {
            font-weight: 400;
            font-weight: 500;
    font-size: 19px;
    line-height: 28px;
    letter-spacing: 0.35px;
    background-color: yellow;
          }
          &.selected ~ .item {
            font-weight: 500;
    font-size: 15px;
    line-height: 28px;
    letter-spacing: 0.35px;
    background-color: red;
          }
    }
}

有人可以帮我实现这个目标吗？ 我被困在这样的地方：

Answer 1

将此代码添加到您的 css 文件中，它将以蓝色背景显示选定的 class 元素

 li.selected { background-color: blue; }

Answer 2

className={ item ${item.selected === true? "selected": ""} item ${item.selected === true? "selected": ""} } 您可以通过更改所选元素来更改背景。