材质UI颜色覆盖在React滑块

Question

如何通过scss覆盖primary, secondary, info, type默认颜色?请帮助

$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

你可以用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>