Material-ui: [Divider] 크기 조정 된 화면에서 일관되지 않은 높이

@urirahimi Chrome이 하위 픽셀 계산을 수행하도록 강제하고 있으며 일반적으로 이상한 동작이 있습니다.
다음을 통해 문제를 완화 할 수 있습니다.

const theme = createMuiTheme({
  overrides: {
    MuiDivider: {
      root: {
        marginTop: 1,
      },
    },
  ),
});

구현을 배경색에서 테두리 위쪽으로 변경하려고 시도했지만 도움이되지 않습니다.
https://stackoverflow.com/questions/12547580/borders-disappear-in-chrome-when-i-zoom-in

브라우저 확대 / 축소를 90 % 또는 100 %로 늘리십시오. 마법

주의 사항 : 아직 버전 3.9.2를 사용 중이며 Firefox 및 Chrome에서만 테스트했습니다.

테두리 두께로 thin 를 사용하면 문제가 해결되었습니다. 브라우저가 두께를 결정할 수 있습니다. Chrome에서는 thin 이 1px / zoom . -확대 / 축소 수준에 관계없이 항상 정확히 1 개의 실제 픽셀로 유지됩니다. Firefox는 축소 할 때도 동일하지만,> = 200 % 확대시 실제 픽셀 2 개,> = 300 % 확대시 실제 픽셀 3 개 등으로 테두리를 만듭니다. 안타깝게도 두 개체가 동일하게 동작하지는 않지만 적어도 둘 다 동작합니다. 더 나은와 thin 보다 1px .

const theme = createMuiTheme({
  overrides: {
    MuiDivider: {
      root: {
        // Dividers not consistent when zooming.
        // https://github.com/mui-org/material-ui/issues/14815
        borderTop: 'thin solid rgba(0, 0, 0, 0.12)', //this color should be theme.palette.divider if that is set
        backgroundColor: undefined,
        height: undefined,
      },
    },
  ),
});