Material UI：我想让这个组件响应答案

【问题标题】：Material UI: I want to make this component responsiveMaterial UI：我想让这个组件响应
【发布时间】：2021-05-26 03:37:38
【问题描述】：

我有这个项目，它是为了监控员工，我有一个组件是“创建工作区”

我已经向这个界面添加了元素，我希望这个界面能够响应，我该怎么做？

您可以通过哪些方式使此页面具有响应性？

在这个组件中，我添加了一组元素。

const useStyles = makeStyles({

    resize:{
        fontSize:24
    }

});

const Settings: FC = () => {

    const classes = useStyles()

    return (
            <Card style={{backgroundColor: 'transparent' ,   maxWidth: 1500 , minWidth: 500}}>

                <CardContent>

                    <Box
                        sx={{
                            maxWidth: 1500,
                            // minWidth: 300
                        }}
                    >

                        <Box
                            sx={{
                                display: 'flex',
                                justifyContent: 'start'
                            }}
                        >

                            <Avatar style={{width: '5rem', height: '5rem'}} alt="Remy Sharp"
                                    src="/static/images/avatar/1.jpg"/>

                            <TextField

                                fullWidth
                                name="workspaceName"
                                placeholder="Workspace Name"
                                variant="standard"
                                style={{
                                    paddingLeft: '1.4rem',
                                    transition: ' all .2s cubic-bezier(.785,.135,.15,.86) 0s',
                                    display: 'flex',
                                    alignItems: 'center',
                                    flexGrow: 1,
                                    position: 'relative',
                                    color: '#828588',

                                }}
                                InputProps={{
                                    classes: {
                                        input: classes.resize,
                                    },
                                }}
                                defaultValue="nameeeee"
                            />


                        </Box>

                    </Box>
                    <CardActions
                        style={{ paddingTop: '10rem'}}
                    >

                            <Button style={{
                                minWidth: '10rem',
                                fontSize: '1.5rem',
                                height: '44px',
                                fontWeight: 400,
                                textShadow: 'none',
                                color: '#fd71af',
                                border: 0,
                                background: 'none'

                            }}>Delete Workspace</Button>

                            <Button
                                color="primary"
                                component={RouterLink}
                                to="/dashboard/workspaces/1"
                                variant="contained"
                                style={{
                                    minWidth: '13rem',
                                    minHeight: '4.3rem',
                                    fontSize: '1.4rem',
                                    backgroundColor: '#7b68ee',
                                    borderRadius: 6,
                                    marginLeft:'60rem'

                                }}
                            >
                                Saved
                            </Button>


                    </CardActions>
                </CardContent>

            </Card>
    );
}

export default Settings;

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

在您希望布局响应的任何地方使用材质 UI 网格。在此处查看其文档：Material UI Grid

您可以为不同的屏幕尺寸添加不同的布局。您还应该将您的组件包装在 Material-UI 提供的Container 组件中，它使您的网页变得流畅。

希望这能回答你的问题。

【讨论】：