Блог

Привет, ребята и дамы,

Я пытаюсь добавить поля над кнопкой под кнопкой.

Вот некоторый соответствующий код:

 const useStyles = makeStyles(() => ({
  progress: {
    display: 'block',
    margin: 'auto',
  },
}));

return (
    <Container>
      <Typography variant="h3" component="h1" style={{ textAlign: 'center' }}>
        Scholarships
      </Typography>
      <FilterBar changeSortBy={setSortField} changeSortFormat={setSortDir} />
      {error?.toString() ||
        (loading amp;amp; <CircularProgress className={classes.progress} />) || (
          <ScholarshipList scholarships={scholarships} />
        )}
       <Button mt={3} mb={3} </Button>
    
    </Container>
  );
}
 

В material-ui документации вы найдете;

 
const theme = {
  spacing: 8,
}

<Box m={-2} /> // margin: -16px;

 

Но в моем случае я хочу использовать существующую тему, которая, я думаю, упоминается выше const useStyles = makeStyles (() => .

Итак, как мне использовать существующую тему, которую в настоящее время использует веб-приложение, чтобы установить поля в 24 пикселя над и под кнопкой?

Как вы можете видеть, я добавил необходимые mt={3} и mb={3} . Теперь я должен убедиться, что это приводит к полям в 24 пикселя, используя интервал между темами, равный 8.

Спасибо!

Используйте шаблоны MaterialUI — theme.spacing(3, 0)

вот codesandbox: https://codesandbox.io/s/loving-mirzakhani-5d12h

также страница из Matrieal объясняет о theme.spacing: https://material-ui.com/customization/spacing /

существует тема MaterialUI по умолчанию, которую вы можете изменить, но у нее есть свойства по умолчанию — поэтому значение по умолчанию для theme.spacing равно 8.

интервал — это число, определяющее значение при использовании интервала в вашем приложении. вы можете определить, что интервал = 12, и вы напишете, например

заполнение: theme.spacing(2) — для достижения css-стиля заполнения: 24px (12 * 2)

вы можете сделать так

 buttonStyle: {
  margin: theme.spacing(3, 0) // 3 * 8 = 24 = 24px
}
 

и это

 <Button className={styles.buttonStyle}>
  Button-Text
</Button>