Как я могу изменить цвет материала UI Slider

Question

Я хочу изменить цвет компонента Material UI Slider

Я пытался изменить стиль CSS, и он не работал, затем я попробовал https://github.com/mui-org/material-ui/issues/6807, и я применил этот код, но он не работает

getMuiTheme:

const muiTheme = getMuiTheme({
  slider: {
    trackColor: "yellow",
    selectionColor: "green"
  }
});

и в компоненте:

<MuiThemeProvider muiTheme={muiTheme}>
 <Slider
 min={18}
 max={90}
 ValueLabelComponent={ValueLabelComponent} 
 defaultValue={40}
 />
</MuiThemeProvider>

Answer 1

Это зависит от того, какую версию Material-UI вы используете. Ваш код соответствует Material-UI v0.x :

import React from 'react';
import Slider from 'material-ui/Slider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import { MuiThemeProvider } from 'material-ui';

const muiTheme = getMuiTheme({
  slider: {
    trackColor: "yellow",
    selectionColor: "red"
  }
});

export default function V0Slider() {


  return (
    <MuiThemeProvider muiTheme={muiTheme}>
    <Slider
    min={18}
    max={90}
    ValueLabelComponent={0} 
    defaultValue={40}
    />
   </MuiThemeProvider>
  );
}

Если вы используете Material-UI v4 , это будет путь:

import React from "react";
import Slider from '@material-ui/core/Slider';
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';

const muiTheme = createMuiTheme({
  overrides:{
    MuiSlider: {
      thumb:{
      color: "yellow",
      },
      track: {
        color: 'red'
      },
      rail: {
        color: 'black'
      }
    }
}
});

export default function V4Slider() {
  return (
    <ThemeProvider theme={muiTheme}>
      <Slider min={18} max={90} defaultValue={40} />
    </ThemeProvider>
  );
}

Если вы используете другую версию material-ui, дайте мне знать, какую именно, и я постараюсь помочь.