иконки кнопок и слайдер в цвет темы

src/assets/icons/CalendarIcon.tsx

@@ -1,6 +1,8 @@
-import { Box } from "@mui/material";
+import { Box,  SxProps, Theme } from "@mui/material";
-
+interface Props {
-export default function CalendarIcon() {
+    sx?: SxProps<Theme>;
+}
+export default function CalendarIcon({ sx }: Props) {
   return (
     <Box
       sx={{
@@ -20,6 +22,7 @@ export default function CalendarIcon() {
         "&:active rect": {
           stroke: "#FB5607",
         },
+          ...sx
       }}
     >
       <svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">

src/ui_kit/CustomSlider.tsx

@@ -1,4 +1,4 @@
-import { Slider, useTheme } from "@mui/material";
+import { Slider, SxProps, Theme, useTheme } from "@mui/material";
 
 type CustomSliderProps = {
   defaultValue?: number;
@@ -6,6 +6,7 @@ type CustomSliderProps = {
   min?: number;
   max?: number;
   step?: number;
+  sx?: SxProps<Theme>;
   onChange?: (_: Event, value: number | number[]) => void;
   onChangeCommitted?: (_: React.SyntheticEvent | Event, value: number | number[]) => void;
 };
@@ -18,6 +19,7 @@ export const CustomSlider = ({
   step,
   onChange,
   onChangeCommitted,
+  sx,
 }: CustomSliderProps) => {
   // const handleChange = ({ type }: Event, newValue: number | number[]) => {
   //     // Для корректной работы слайдера в FireFox
@@ -71,6 +73,7 @@ export const CustomSlider = ({
         "& .MuiSlider-track": {
           height: "12px",
         },
+          ...sx
       }}
     />
   );

src/ui_kit/RadioCheck.tsx

@@ -1,7 +1,9 @@
 import { Box, useTheme } from "@mui/material";
+interface Props {
+    color?: string;
+}
 
-
+export default function RadioCheck({ color = "#7E2AEA" }: Props) {
-export default function RadioCheck() {
     const theme = useTheme();
 
     return (
@@ -16,7 +18,7 @@ export default function RadioCheck() {
             }}
         >
             <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <rect x="0.5" y="0.5" width="25" height="25" rx="12.5" fill="#7E2AEA" stroke="#7E2AEA"/>
+                <rect x="0.5" y="0.5" width="25" height="25" rx="12.5" fill={color} stroke={color}/>
                 <rect x="8" y="8" width="10" height="10" rx="5" fill="white"/>
             </svg>
         </Box>