Question

我是新来的人，他们使用选项卡的实质性UI进行尝试，并尝试匹配以前内容中的内容，但没有空间。您能帮我吗enter image description here

Answer 1

 1.    `handleChange = (event, value) => {
        this.setState({value});
        };

render() {
    const  { value } = this.state;
    const { classes }= this.props;
    return(
        <div className={"cfl-container cfl-container-mobile col-centered background-blue-gradient"}
             style={{'maxWidth': '600px','minHeight':'100vh'}}>
                <div className={"background-dark-blue text-center padding-20 color-white font-18"}>
                    Ashish XI vs Pranav XI
                </div>
                <div className={"padding-20 background-blue-gradient "}>
                   <div className={"background-white border-radius-default"}>
                       <div className={"text-center padding-12"}>
                           India vs Australia 1st t20
                       </div>
                   </div>
                    <div className={"margin-top-20 background-white border-radius-default display-flex padding-top-16 padding-bottom-16 justify-content-center"}
                    style={{"padding-right":"20px","padding-left":"28px"}}>
                        <div className={"icon-trophy"} style={{"zoom":"1.6"}}/>
                        <div className={"font-bold margin-left-12 margin-top-4 font-20"}>Ashish won by 24.26 points</div>
                    </div>
                </div>
                <Tabs value={value} onChange={this.handleChange} variant="fullWidth"  classes={{root:classes.tabsContainer,indicator:classes.indicator}}>
                    <Tab value={1} label="Pranav XI" classes={{label:classes.label,root:classes.root,selected:classes.selected}}/>
                    <Tab value={2} label="Ashish XI" classes={{label:classes.label,root:classes.root,selected:classes.selected}} />
                </Tabs>
                {value === 1 }
                {value === 2 }
        </div>
    );
}`

使用材料Ui对标签进行React js

1 个答案: