如何选择样式组件中组件类型的最后一个元素答案

【问题标题】：How to select the last element which is of the component's type in styled-components如何选择样式组件中组件类型的最后一个元素
【发布时间】：2021-10-23 12:14:04
【问题描述】：

我想选择属于我的组件类型的最后一个元素。

我有一个边距为 0px 的 InputGroup 组件。
我还有一个表单，我在其中多次使用 InputGroup 组件。

<form>
    <InputGroup
        label="Email ou Usuário"
        borderColor={borderEmail}
        icon={emailIcon}
        type="email"
        placeholder="Digite seu Email"
        onChange={e => setEmail(e.target.value)}
        value={email}
    />

    <InputGroup
        label="Senha"
        borderColor={borderSenha}
        icon={passwordIcon}
        type="password"
        placeholder="Digite sua Senha"
        onChange={e => setSenha(e.target.value)}
        value={senha}
    />

    <ButtonsContainer>
        <LoginButton type="submit">Entrar</LoginButton>

        <p>OU</p>

        <GoogleButton>
            <img src={googleLogo} alt="" />

            <p>Log In with Google</p>
        </GoogleButton>
    </ButtonsContainer>
</form>

我的目标是使最后一个 InputGroup 的下边距为 55px，但是当我使用 &:last-of-type 时，边距只有在我删除 ButtonsContainer 组件时才会出现。

我认为这与 InputGroup 的 Container 是 div 和 ButtonsContainer 的 Container 有关，但我不知道如何解决。

输入组/index.jsx：

import React from 'react';

import {
    Container,
    Label,
    ContainerInput,
    Input
} from './styles';

const InputGroup = ({
    label,
    borderColor,
    icon,
    type,
    value,
    onChange,
    placeholder,
    mask,
    maskChar,
    onKeyDown
}) => (
    <Container>
        <Label>{label}</Label>

        <ContainerInput borderColor={borderColor}>
            <img src={icon} alt="" />

            <Input
                type={type}
                value={value}
                onChange={onChange}
                placeholder={placeholder}
                onKeyDown={onKeyDown}
            />
        </ContainerInput>
    </Container>
);

export default InputGroup;

InputGroup/styles.js：

import styled from 'styled-components';

export const Container = styled.div`
    width: 100%;

    & + & {
        margin-top: 24px;
    }

    :last-of-type {
        margin-bottom: 55px;
    }
`;

export const Label = styled.label`
    font: normal 500 12px/16px var(--font-fourth);
`;

export const ContainerInput = styled.div`
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    margin-top: 8px;
    border: 1px solid;
    border-color: ${({ borderColor }) => borderColor};
    border-radius: 20px;
    transition: border-color 0.15s;

    :focus-within{
        border-color: #1904E5;
    }

    img{
        width: 16px;
        height: 16px;
        margin: 12px 8px 12px 12px;
    }
`;

export const Input = styled.input`
    width: 100%;
    height: 100%;
    border-radius: 0 20px 20px 0;
    border: none;
    color: #575172;
    font: normal 500 12px/16px var(--font-primary);

    :hover{
        cursor: pointer;
    }

    ::placeholder{
        color: #575172;
        font: normal 500 12px/16px var(--font-primary);
    }
`;

编辑：
诸如“在条目周围添加容器”之类的事情已经得到响应，但是如果我这样做了，我每次使用组件时都必须这样做，这会破坏组件的可重用性，因为我必须做同样的事情一遍又一遍。每次。但是如果没有其他方法我可以这样做，因为它也有效

【问题讨论】：

为什么不把InputGroup 组件放在一个底部有55px 内边距的容器中呢？否则请参阅referring to other components。
@DrewReese 我已经编辑了这个问题，以便更清楚为什么我还没有接受这个解决方案（但这是一个很好的解决方案）
您的编辑评论毫无意义，因为您使用输入组的组件似乎不是是可重用组件。换句话说，它似乎是表单的专用/特定实例，特别是登录表单。如果您想创建一个“通用”表单容器，则将输入组作为子项并将它们呈现到我们建议使用 padding-bottom 规则的容器中。然后你的表单组件就变成了一个包装器。
这个表单是一个登录页面，是的，但是我在我的应用程序中需要数据输入的任何地方都使用 InputGroup，所以如果我使用带边距的包装器，我必须在我使用的每个页面上都做同样的事情.
哦，我没想到。就像，那是错误的，因为我正在影响我使用这个组件的每个页面的布局，所以布局取决于组件，而不是相反，所以最好的解决方案是实际放置一个
作为一个包装器来保持一切独立？

标签： reactjs css-selectors jsx styled-components

【解决方案1】：

使用 fieldset 标签包装 InputGroup 组件。

<fieldset>
  <InputGroup
    label="Email ou Usuário"
    borderColor={borderEmail}
    icon={emailIcon}
    type="email"
    placeholder="Digite seu Email"
    onChange={e => setEmail(e.target.value)}
    value={email}
  />

  <InputGroup
    label="Senha"
    borderColor={borderSenha}
    icon={passwordIcon}
    type="password"
    placeholder="Digite sua Senha"
    onChange={e => setSenha(e.target.value)}
    value={senha}
  />
</fieldset>

【讨论】：