Material UI Color Overwrite in React Slider

Question

How to overwrite primary, secondary , info, type default color through scss ? Please help

$primary: rgb(11, 136, 245);
$secondary: rgb(83, 83, 83);

:export {
  primary: $primary;
  secondary: $secondary;
}

https://codesandbox.io/s/colorslider-material-demo-forked-7m4b8c?file=/slider.scss

Answer 1

You can wrap your sliders in a ThemeProvider:

import { ThemeProvider, createTheme } from "@mui/material/styles";
const theme = createTheme({
  palette: {
    primary: {
      main: "#00F"
    },
    secondary: {
      main: "#F00"
    }
  }
});


<ThemeProvider theme={theme}>
   <Slider
     aria-label="Temperature"
     defaultValue={30}
     getAriaValueText={valuetext}
     color="primary"
     className="slider-groove"
   />
   <Slider
     aria-label="Temperature"
     defaultValue={30}
     getAriaValueText={valuetext}
     color="warning"
     className="slider-groove"
   />
   <Slider
     aria-label="Temperature"
     defaultValue={30}
     getAriaValueText={valuetext}
     color="secondary"
     className="slider-groove"
   />
 </ThemeProvider>