如何在styled-components中选中同类型自定义组件的最后一个元素

问题根因 #

CSS 的 :last-of-type 选择器是按HTML原生标签类型匹配，而非按组件类型、类名匹配。你的InputGroup根容器是div，后续的ButtonsContainer根节点也是div，所以form父容器下最后一个div是ButtonsContainer，自然匹配不到第二个InputGroup的:last-of-type规则。

最优解决方案（不破坏组件复用性，无需修改外部调用代码） #

只需要修改InputGroup内部样式文件的根容器标签，把div换成其他不和后续按钮容器冲突的语义化标签即可，比如<fieldset>（表单输入组专用的语义标签，非常适配你的场景），同时重置掉fieldset的默认自带样式即可：
修改InputGroup/styles.js中的Container定义：

import styled from 'styled-components';

// 把styled.div改成styled.fieldset，重置默认样式就行
export const Container = styled.fieldset`
    /* 重置fieldset浏览器默认样式 */
    margin: 0;
    padding: 0;
    border: 0;

    width: 100%;

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

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

修改后InputGroup的根标签是fieldset，ButtonsContainer还是div，form下最后一个fieldset就是第二个InputGroup，:last-of-type规则会自动生效，外部调用组件的代码不需要做任何改动，完全不影响组件复用性。

备选方案（如果不想修改根标签） #

如果因为业务原因不能修改根标签，可以给InputGroup加一个可选的isLast属性，需要设置底部边距的时候手动传值：

1. 修改InputGroup/index.jsx接收props：

const InputGroup = ({
    // 原有props...
    isLast
}) => (
    <Container isLast={isLast}>
        {/* 原有内容 */}
    </Container>
);

2. 样式里适配：

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

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

    ${props => props.isLast && `
        margin-bottom: 55px;
    `}
`;

3. 调用时给最后一个InputGroup加属性：

<InputGroup
    label="Senha"
    // 原有属性...
    isLast
/>

内容的提问来源于stack exchange，提问作者Luis Meirelles