如何在css中为模式引导创建异常

我有一个引导模式，我认为它不能很好地工作，因为css样式正在应用于它。。。是否可以为此元素创建异常

触笔时模式启动：

错误模式（卡在列中，无法正常工作）：

非常感谢你们的帮助

kanban.js（一部分，模式在末尾）：

function Item({ provided, item, style, isDragging, column, index }) {
    return (
      <div
        {...provided.draggableProps}
        {...provided.dragHandleProps}
        ref={provided.innerRef}
        style={getStyle({
          draggableStyle: provided.draggableProps.style,
          virtualStyle: style,
          isDragging,
        })}
        className={`item ${
          isDragging
            ? "is-dragging"
            : item.type === "starchyFoods"
            ? "is-starchyFoods"
            : item.type === "fats"
            ? "is-fats"
            : item.type === "proteinFoods"
            ? "is-proteinFoods"
            : item.type === "fruits"
            ? "is-fruits"
            : item.type === "veggies"
            ? "is-veggies"
            : ""
        }`}
      >
        {
          ((index = arrFoods.findIndex(
            (ingredient) => ingredient.idUnique === item.idUnique
          )),
          Math.round(arrFoods[index].foodWeight / 5) * 5)
        }
        {"g"} {item.name}
        <img src={item.img_link} alt="foodImg" width="50px" />
        <BsTrash
          type="button"
          size="24px"
          style={{ fontSize: 25 }}
          onClick={() =>
            deleteItem(
              item.idUnique,
              kanban,
              column.name,
              arrFoods,
              addFoodWeight,
              setKanban
            )
          }
        />
        <BsFiles
          type="button"
          size="24px"
          style={{ fontSize: 25 }}
          onClick={() =>
            duplicateItem(
              index,
              column.name,
              arrFoods,
              uuid,
              addFoodWeight,
              kanban,
              setKanban
            )
          }
        />
        {item.type === "starchyFoods" ? (
          ""
        ) : item.type === "fats" ? (
          ""
        ) : item.type === "proteinFoods" ? (
          ""
        ) : (
          <ModalBody itemIdUnique={item.idUnique} columnName={column.name}
          />
        )}
      </div>
    );
  }

:root {
  --grid: 8px;
  --pink: #fd3afd;
  --pinkDark: #690169;
  --greyLight: #515b7d;
  --black: #1d212e;
  --borderWidth: 4px;
  --borderRadius: 8px;
}

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.columns {
  display: flex;
}

.column {
  margin: calc(var(--grid) / 2);
  border: var(--borderWidth) solid #fffddd;
  border-radius: var(--borderRadius);
  background-image: linear-gradient(rgba(0, 0, 0, 0.769), rgba(0, 0, 0, 0.961)),
    var(--mybguri64);
}

.column-title {
  font-size: 40px;
  color: #fffddd;
  text-shadow: 0px 0px 2px var(--pinkDark),
    0px 0px 15px rgba(255, 110, 255, 0.5);
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

.column-title:hover {
  text-shadow: 0px 0px 2px var(--pinkDark),
    0px 0px 15px rgba(255, 110, 255, 0.8);
}

.task-list {
  /* this has no visible impact, but is in line with the absolute position spacing.
  doing this ensures that dropping into an empty list will be in the correct visual position */
  padding-left: var(--grid);
  padding-right: var(--grid);
  scrollbar-color: dark;
}

.task-list::-webkit-scrollbar {
  width: 1em;
}

.task-list::-webkit-scrollbar-track {
  background-color: var(--greyLight);
  border-radius: var(--borderRadius);
}

.task-list::-webkit-scrollbar-thumb {
  background-color: var(--pink);
}

.item {
  background: #333851;
  border: var(--borderWidth) solid mediumpurple;
  box-sizing: border-box;
  border-radius: var(--borderRadius);
  color: #fffddd;
  font-size: 23px;
  user-select: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.item.is-dragging {
  background: #515b7d;
  border-color: #08ff08;
  box-shadow: 0px 0px 2px rgb(8, 58, 30), 0px 0px 10px MediumSeaGreen;
}
.item.is-starchyFoods {
  background: #b65c03;
}
.item.is-fats {
  background: #ffcd56;
}
.item.is-proteinFoods {
  background: #ff6384;
}
.item.is-fruits {
  background: #ff9f40;
}
.item.is-veggies {
  background: #45866f;
}