Юзаю https://material-ui.com/components/progress/#linear-determinate в качестве сетки в таблице. На каждый шаг линия сетки совместил с прогрессом. Круто!


Но, если выставить небольшую толщину в 1 пиксель, это же сетка таблицы, то на одном и том "рендере" этот прогресс рисуется с РАЗНОЙ толщиной Никогда такого не видел. Смотрите сами — 2й, 3й и 4й прогресс — тольще чем отсальные:


Это на обычном мониторе DPI=125%

На ретине все ok. На дисплее с плотностью 100% (96 dpi) не пробовал.

Высота (толщина) и цвет задается строго по документации:

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import LinearProgress from '@material-ui/core/LinearProgress';

const progressStyle = theme => ({
    root: {
        height: "1px",
    },
    colorPrimary: {backgroundColor: '#EEE'},
    barColorPrimary: {backgroundColor: '#888'}
});
const LinearProgress_Customized = withStyles(progressStyle)(LinearProgress);

P.S. Кстати, а какого чёрта черточки между шагами визарда имеют РАЗНУЮ длину?

Юзаю https://material-ui.com/components/progress/#linear-determinate в качестве сетки в таблице. На каждый шаг линия сетки совместил с прогрессом. Круто!


Но, если выставить небольшую толщину в 1 пиксель, это же сетка таблицы, то на одном и том "рендере" этот прогресс рисуется с РАЗНОЙ толщиной Никогда такого не видел. Смотрите сами — 2й, 3й и 4й прогресс — тольще чем отсальные:


Это на обычном мониторе DPI=125%

На ретине все ok. На дисплее с плотностью 100% (96 dpi) не пробовал.

Высота (толщина) и цвет задается строго по документации:

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import LinearProgress from '@material-ui/core/LinearProgress';

const progressStyle = theme => ({
    root: {
        height: "1px",
    },
    colorPrimary: {backgroundColor: '#EEE'},
    barColorPrimary: {backgroundColor: '#888'}
});
const LinearProgress_Customized = withStyles(progressStyle)(LinearProgress);

P.S. Кстати, а какого чёрта черточки между шагами визарда имеют РАЗНУЮ длину?