Блог

Слово «Удалить рабочее пространство» появляется друг над другом, как показано на рисунке, где слово «Удалить» появляется в одной строке, а слово «Рабочее пространство» в другой строке, и я хочу, чтобы они появлялись в одной строке.

Как я могу решить эту проблему?

В этом файле был разработан интерфейс, показанный на изображении, и кнопка «Удалить рабочее пространство».

 import type { FC } from 'react';
import React from 'react';
import { Avatar, Box, TextField, Grid } from '@material-ui/core';
import Button from '@material-ui/core/Button';
import { Link as RouterLink } from 'react-router-dom';

const Settings: FC = () => {
  return (
    <form>
      <Grid container spacing={3}>
        <Grid item md={12} xs={12}>
          <Box
            style={{
              display: 'flex',
              alignItems: 'center',
            }}
          >
            <Avatar style={{ width: '5rem', height: '5rem' }} alt="Remy Sharp" src="/static/images/avatar/1.jpg" />

            <TextField
              fullWidth
              name="workspaceName"
              placeholder="Workspace Name"
              style={{
                paddingLeft: '1rem',
              }}
            />
          </Box>

          <Box
            sx={{
              display: 'flex',
              alignItems: 'center',
            }}
            style={{
              marginTop: '6rem',
            }}
          >
            <Button
              style={{
                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={{
                width: '17rem',
                height: '5.4rem',
                marginLeft: '70rem',
                fontSize: '1.8rem',
                backgroundColor: '#7b68ee',
                borderRadius: 6,
              }}
            >
              Saved
            </Button>
          </Box>
        </Grid>
      </Grid>
    </form>
  );
};

export default Settings;