Блог

Нижний колонтитул выглядит слишком большим и почти занимает большую часть экрана, особенно если он предназначен для небольших устройств. Как я могу уменьшить высоту этого нижнего колонтитула, чтобы он не выглядел слишком большим для больших и маленьких экранов.

 import { Container, Box, Grid } from "@material-ui/core";

const Footer = (props) => {
  return (
    <footer>
      <Box
        px={{ xs: 3, sm: 10 }}
        py={{ xs: 5, sm: 10 }}
        // bgcolor="text.secondary"
        // color="white"
        color="text.secondary"
        bgcolor="#E3F2FD"
      >
        <Container maxWidth="lg">
          <Grid container spacing={5}>
            <Grid item xs={12} sm={4}>
              <Box borderBottom={1}>Help</Box>
              <Box>Contactt</Box>
              <Box>Support</Box>
              <Box>Privacy</Box>
            </Grid>
            <Grid item xs={12} sm={4}>
              <Box borderBottom={1}>Help</Box>
              <Box>Contactt</Box>
              <Box>Support</Box>
              <Box>Privacy</Box>
            </Grid>
            <Grid item xs={12} sm={4}>
              <Box borderBottom={1}>Help</Box>
              <Box>Contactt</Box>
              <Box>Support</Box>
              <Box>Privacy</Box>
            </Grid>
          </Grid>
          {/* change name of the website here */}
          <Box textAlign="center" pt={{ xs: 5, sm: 10 }} pb={{ xs: 5, sm: 0 }}>
            Website amp;reg; {new Date().getFullYear()}
          </Box>
        </Container>
      </Box>
    </footer>
  );
};

export default Footer;
 

Это кодовое поле для этого нижнего колонтитула — https://codesandbox.io/s/nameless-frog-ros09?file=/src/App.js

Я думаю, что большая обивка происходит от px py реквизита и в Box компоненте.

Отсюда https://material-ui.com/system/spacing/, мы видим, что px горизонтальное заполнение ( padding-left и padding-right ) также py является вертикальным заполнением ( padding-top и padding-bottom ).

Отсюда https://material-ui.com/customization/spacing/, мы видим, что заполнение по умолчанию для пользовательского интерфейса Material составляет 8 пикселей spacing = 1 .

Отсюда https://material-ui.com/customization/breakpoints/, мы видим xs , что это очень маленький экран и sm это маленький экран.

Таким образом, px={{ xs: 3, sm: 10 }} это означает, что отступ слева и справа составляет 3 * 8 пикселей = 24 пикселя для очень маленького экрана , а отступ слева и справа-10 * 8 пикселей = 80 пикселей для маленького экрана или выше (потому что нет md , lg , и xl определены в коде).

Вот скриншот, если вы прокомментируете px и py реквизиты в Box компоненте.

   return (
      <Box
        // px={{ xs: 3, sm: 10 }}
        // py={{ xs: 5, sm: 10 }}
        // bgcolor="text.secondary"
        // color="white"
        color="text.secondary"
        bgcolor="#E3F2FD"
      >
        <Container maxWidth="lg">
          <Grid container spacing={2}>
            <Grid item xs={12} sm={4}>
              <Box borderBottom={1}>Help</Box>
              <Box>Contactt</Box>
              <Box>Support</Box>
              <Box>Privacy</Box>
            </Grid>
            <Grid item xs={12} sm={4}>
              <Box borderBottom={1}>Help</Box>
              <Box>Contactt</Box>
              <Box>Support</Box>
              <Box>Privacy</Box>
            </Grid>
            <Grid item xs={12} sm={4}>
              <Box borderBottom={1}>Help</Box>
              <Box>Contactt</Box>
              <Box>Support</Box>
              <Box>Privacy</Box>
            </Grid>
          </Grid>
          {/* change name of the website here */}
          <Box textAlign="center" pt={{ xs: 5, sm: 10 }} pb={{ xs: 5, sm: 0 }}>
            Website amp;reg; {new Date().getFullYear()}
          </Box>
        </Container>
      </Box>
  )