Flexbox столбца в ExpansionPanelDetails - PullRequest
Новая
       5

Flexbox столбца в ExpansionPanelDetails

0 голосов
/ 30 октября 2018

Я изучаю React и использую компоненты Material UI. Вот метод render моего собственного компонента: 

render() {
    return (
        <ExpansionPanel defaultExpanded={true}>
            <ExpansionPanelSummary>
                <Typography variant="h6">Main Track</Typography>
            </ExpansionPanelSummary>
            <ExpansionPanelDetails>
                <Typography variant="body2">{this.props.mainTrack.trackSegments.length} segments in the MainTrack</Typography>
                <List>
                    {this.props.mainTrack.trackSegments.map(
                        (segment, index) => <ListItem key={index}><SegmentEditor segment={segment} /></ListItem>
                        )}
                </List>
            </ExpansionPanelDetails>
        </ExpansionPanel>
    );
}

Все хорошо, но Typography и List отображаются бок о бок, как если бы они были встроенными блоками. Я обнаружил, что причина в том, что ExpansionPanelDetails имеет макет flexbox, поэтому я мог решить мою проблему, просто установив для flex-direction значение column.

Однако я не могу этого сделать. Документация говорит, что я могу действовать на classes опору компонента, но я не знаю, как это сделать. Я пытался 

<ExpansionPanelDetails classes={{ root: { flexDirection: 'column' }}}>

но это не сработало, по причинам, которые я не знаю.

Как изменить стиль компонента?

...