css - 如何在 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>
);
}
css
: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;
}
解决方案
推荐阅读
- reactjs - 如何在 React 中的按钮内放置一个微调器?
- react-native - 使用 formdata 将本机图像发送到服务器
- javascript - MobX + React Native 不重新渲染
- vue.js - vue-i18n createApp 显示 Uncaught TypeError: Cannot read property 'config' of undefined
- python - 机器人发送回复时出现的括号(不和谐,python)
- html - 字体适用于模拟器但不适用于 iOS 设备
- swiftui - SwiftUI:在带有动画的计时器上更改图像
- python - pandas multiindex DataFrame中的圆形浮点数
- reactjs - 在反应中使用 URLSearchParams 获取 url 参数
- django - 无法将链接 postgreSQL 加载到 Django