Блог

Я использую аккордеон пользовательского интерфейса Material для создания меню фильтров.

Это выглядит так на некоторых устройствах, в то время как это выглядит так на других устройствах с разными размерами, даже если поля между элементами одинаковы и используется один и тот же код. При изменении размеров экрана несоответствие изменяется.

Как исправить это несоответствие с расстоянием между каждым элементом фильтра?

Вот мое досье FilterAccordion.tsx :

 lt;Box className={classes.accordionRoot}gt;  lt;Accordion style={{ boxShadow: "none" }} defaultExpanded={true}gt;  lt;AccordionSummary  expandIcon={lt;ExpandMore style={{ fill: "#d3d3d3" }} /gt;}gt;  lt;div className={classes.verticalrootcontainer}gt;  lt;Icon  onClick={(e) =gt; e.stopPropagation()}  style={{  fill: "#d3d3d3",  width: "2rem",  marginRight: "1rem",  transform: "scale(3)",  zIndex: -1,  }}  /gt;  lt;Typography  variant="body1"  className={`titleAquire ${classes.title}`}gt;  {title}  lt;/Typographygt;  lt;/divgt;  lt;/AccordionSummarygt;  lt;AccordionDetailsgt;  lt;div className={classes.listRoot}gt;  {Object.keys(groupByPacks).map((item, index) =gt; {  let checked = isChecked(item);  return (  lt;div  key={index}  className={`${classes.list} ${  checked ? classes.selected : ""  }`}  onClick={() =gt; handleOnCheck(item)}gt;  lt;Typography variant="body1" className={classes.item}gt;  {item}  lt;/Typographygt;  lt;Typography variant="body1" className={classes.item}gt;  {groupByFilteredPacks[item]  ? groupByFilteredPacks[item]?.length  : 0}  lt;/Typographygt;  lt;/divgt;  );  })}  lt;/divgt;  lt;/AccordionDetailsgt;  lt;/Accordiongt; lt;/Boxgt;  

И файл CSS:

 accordionRoot: {  "amp; .MuiAccordion-root": {  background: "transparent",  },  "amp; .MuiAccordionDetails-root": {  padding: "0px",  },  "amp; .MuiAccordionSummary-root": {  padding: "0px",  marginBottom: "-1rem",  },  "amp; .MuiCollapse-entered": {  marginTop: "1rem",  },  },  title: {  fontSize: "18px",  color: theme.on.dark,  },  verticalrootcontainer: {  display: "flex",  alignItems: "center",  },  list: {  display: "flex",  width: "100%",  alignItems: "center",  justifyContent: "space-between",  marginTop: "0.2rem",  padding: "0.2rem 0.5rem",  cursor: "pointer",  "amp;:first-child": {  marginTop: 0,  },  },  item: {  textTransform: "uppercase",  color: theme.on.dark,  opacity: "30%",  },  selected: {  background: theme.on.dark,  "amp; p": {  color: theme.darkMode.light,  opacity: "100%",  },  },  listRoot: {  width: "100%",  },