Question

我一直在尝试从样式化组件中选择一个反应组件，但没有成功...我有一个容器（样式化组件，div）>带有最后一个子分页（React组件）>返回容器（样式化组件，div））...当我检查它时，它表明分页组件是一个div，这是有道理的，因为它返回的是一个样式化的组件（容器），它是一个div ..但是我无法选择使用Container＆：last-使用分页孩子{}

在这种情况下，我希望将分页与网格的末端对齐。我想出了一个可重用的解决方案，但是它不是很好。我正在将道具传递给分页，并使用该道具来证明自己的起点，终点或中心。我正在寻找更好的解决方案，一种从父组件中选择分页的方法。

class Orders extends Component {
        return (
            <Card size={'100vh'}>
                <Container>
                    <Title type="h2" title="Orders" />
                    <br />
                    <Search

                        value={this.state.search}
                        placeHolder={"Search by customer's name"}
                        onChange={e => this.onChangeSearch(e)}
                        onClick={() => alert('Search')}
                    />
                    <br />
                    <Table header={['Customer', 'Total', 'Date', 'Status', 'Action']} data={data} />
                    <Pagination
                        offset={this.state.currentPageNumber}
                        total={25}
                        limit={5}
                        onClick={currentPageNumber => this.changeCurrentPageNumber(currentPageNumber)}
                    /> // Pagination is a react component that returns another Container (styled component, div)
                </Container>
            </Card>
        );
    }
}

export default Orders;

//样式化组件

import styled from 'styled-components';

const Container = styled.div`
    display: grid;
    grid-template-rows: 1fr;
    margin: 2rem;

    &:last-child {
        /* DOES NOT WORK */
    }
`;

export { Container };

从样式组件中选择React组件

0 个答案: