Tengo que alinear los componentes renderizados usando una función de mapa horizontalmente como su alineación predeterminada verticalmente.
Aquí está mi componente:
<Table.Cell> {[...Array(this.props.numPages)].map((e, i) => ( <Typography customLink onClick={() => this.handlePageClick(i + 1)} key={'key'.concat(i)} className='pages'> {i + 1} </Typography> ))} </Table.Cell> Aquí, la Typography es el componente que debe representarse como números de página, pero se representa verticalmente.
Aquí está el css que usé:
.pages{ display: flex; flex-direction: horizontal; }Cualquier ayuda será apreciada.
Es la envoltura la que necesita ser flexible, y la dirección de flexión horizontal no existe...
Prueba con esto tal vez:
<Table.Cell> <div style={{display:'flex', flexDirection:'row'}}> {[...Array(this.props.numPages)].map((e, i) => ( <Typography customLink onClick={() => this.handlePageClick(i + 1)} key={'key'.concat(i)} className='pages'> {i + 1} </Typography> ))} </div> </Table.Cell>