reactjs 如何使用样式化组件“散开”元素列表？

我试图创建一个圆形菜单按钮，其中一个不可见的复选框切换按钮旋转，一些按钮出现在一个扇形运动导航到不同的页面在9点和11点。
我遇到的这个问题是，我只能控制其中一个或两个，因为我无法区分，我不想为每个创建一个新的样式组件。
因此下面代码中的所有内容都可以正常工作，直到：

&:checked ~ ${Button}:first-child {
            transform: translate(-50px, -50px);
    }
    &:checked ~ ${Button}:last-child {
            transform: translate(50px, -50px);
    }
`;

这两种方法都使用“last-child”伪元素。
如果你能帮我的话，我会非常感激的。我相信这只是一个简单的解决办法，但我想不出来。
TIA！
`

const Label = styled.label`
    position: fixed;
    bottom: 50px;
    right: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
`;

const Vertical = styled.rect`
    transform-origin: center;
    transition: rotate 1s, opacity 1.5s;
`;

const Horizontal = styled.rect``;

const SVG = styled.svg`
    transform-origin: center;
    transition: all 2s;
`;

export const Button = styled.button`
    position: absolute;
    transition: all 1s;
    z-index: -1;
`;

export const CircleButton = styled.div`
    position: absolute;
    background: ${props => props.theme.accent};
    color: ${props => props.theme.text};
    height: ${props => props.size || "4rem"};
    width: ${props => props.size || "4rem"};
    margin: 1rem;
    font-size: 3rem;
    border: none;
    border-radius: 100px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 2s;
    cursor: pointer;
    &:active {
        outline: none;
        box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
    }
    z-index: 2;
`;

const Input = styled.input`
    position: absolute;
    z-index: 2;
    display: none;
    transition: all 2s;
    &:checked + ${CircleButton} {
        transform: rotate(720deg);
        ${SVG} {
            ${Vertical} {
                rotate: 90deg;
            }
        }
    }
    &:checked ~ ${Button}:first-child {
            transform: translate(-50px, -50px);
    }
    &:checked ~ ${Button}:last-child {
            transform: translate(50px, -50px);
    }
`;

export const Menu = () => {
    const list = [
        { title: "Water", link: "/Water" },
        { title: "Progress", link: "/Progess" }
    ];

    return (
        <div>
            <Label>
                <Input type="checkbox" onChange={() => console.log("check")} />
                <CircleButton>
                    <SVG viewBox="0 0 100 100" width="50px">
                        <Horizontal width="50" height="4" x="25" y="49" />
                        <Vertical width="4" height="50" x="49" y="25" />
                    </SVG>
                </CircleButton>
                {list.map((item, index) =>
                    <Button>
                        {item.title}
                    </Button>
                )}
            </Label>
        </div>
    );
};

我不知道，如果我没猜错的话，你可以这样使用nth-child：

div:nth-child(even) button {
    background-color: red;
  }
  div:nth-child(odd) button {
    background-color: black;
  }

例如，第一个应用于每个偶数元素，第二个应用于每个奇数元素。div，我从中选择了第n个子元素，只是代码中label元素的父元素。您可以在这个第n个子元素中放置几个公式来选择元素，就像一个算法一样。单击here了解更多。
另一个选项是，在css中签入特定值，如下所示：

button[value="your button title"] {
            background-color: red;
          }
    
but that is a bit hardcoded.

在Menu函数的列表中，你也可以传递一个样式，然后直接将它添加到你应该显示的按钮中。
我希望我能帮助你，而不是误解你的问题。

reactjs 如何使用样式化组件“散开”元素列表？

1条答案

相关问题

热门标签

最新问答