const CustomizedSlider = withStyles((theme) => ({ track: { //styles the line between thumbs height: 4, backgroundColor: theme.palette.warning.main, // we can manipulate color here }, rail: { //styles line outside of thumbs opacity: 1, height: 4, borderRadius: 0, }, thumb: { height: 14, width: 14, background: 'white', border: '1px solid black', }, mark: { height: 8, borderRadius: 0, }, markActive: { opacity: 1, backgroundColor: 'currentColor', }, }))(Slider); <CustomizedSlider className={className} value={data.severity || 0} valueLabelDisplay="off" step={1} min={0} max={4} marks={steps} onChange={this.handleSeverityChange} />

Este componente es una parte de la interfaz de usuario. Se representó en el componente de clase de la misma manera: necesito tener una pista de color que se base en pasos (entrada [índice de datos]). Por ejemplo: si step.value === 0, el color de fondo de la pista activa es rojo, step.value === 1 - azul, etc.