passing default theme in material UI4 - reactjs

Question

I'm trying to pass a default theme to makeStyles in material ui 4.
In my component i called my theme, imported of Styled Components, and i called customMaterialStyles and passed to makeStyles;
my root component
import { faTimes } from '#fortawesome/free-solid-svg-icons';
import { Modal } from '#material-ui/core';
import Step from '#material-ui/core/Step';
import StepLabel from '#material-ui/core/StepLabel';
import Stepper from '#material-ui/core/Stepper';
import { ButtonIcon } from 'commons/ButtonIcon';
import React, { useState } from 'react';
import { useTheme } from 'styled-components';
import { useStyles } from './materialStyles';
import {
StCloseButtonWrapper,
StContainer,
StContentStepper,
StWrapper,
} from './styled';
interface Props {
isVisible: boolean;
onCloseButtonClick: () => void;
}
const CreateEngineSchedule: React.FC<Props> = ({
isVisible,
onCloseButtonClick,
}) => {
const theme = useTheme();
const customMaterialStyles = useStyles(theme.colors);
const [activeStep, setActiveStep] = useState(0);
const steps = ['Nova agenda', 'Escolha a agenda', 'Confirmar'];
const handleNext = () => {
setActiveStep((prevActiveStep) => prevActiveStep + 1);
};
const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
};
console.log('steps', steps);
return (
<Modal open={isVisible} className={customMaterialStyles.modal}>
<StContainer>
<StWrapper>
<StCloseButtonWrapper>
<ButtonIcon
icon={faTimes}
onHoverColor='darkBlue'
color='darkGrey'
tooltip
tooltipTitle='FECHAR'
backgroundColor='transparent'
onHoverBackgroundColor='transparent'
onButtonClick={onCloseButtonClick}
/>
</StCloseButtonWrapper>
<StContentStepper>
<Stepper
activeStep={activeStep}
className={customMaterialStyles.stepperRoot}
>
{steps.map((label) => (
<Step key={label}>
<StepLabel>{label}</StepLabel>
</Step>
))}
</Stepper>
<div>
<button disabled={activeStep === 0} onClick={handleBack}>
Back
</button>
<button onClick={handleNext}>
{activeStep === steps.length - 1 ? 'Finish' : 'Next'}
</button>
</div>
</StContentStepper>
</StWrapper>
</StContainer>
</Modal>
);
};
export default CreateEngineSchedule;
Where i'm trying to use the theme of styled components:
import { makeStyles } from '#material-ui/core/styles';
import { DefaultTheme } from 'styled-components';
// import { useTheme } from 'styled-components';
export const useStyles = makeStyles(() => {
// const systemTheme = useTheme();
return {
modal: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
stepperRoot: {
// '& .MuiStep-root:not(.MuiStep-completed)': {
// },
'& .MuiStepConnector-lineHorizontal': {
display: 'none',
},
'& .MuiStepIcon-root': {
fontSize: '3rem',
fill: 'transparent',
border: '1px solid',
borderRadius: '100%',
},
'& .MuiStepIcon-text': {
fill: (props: keyof DefaultTheme['colors']) => props.blue500,
fontSize: '13px',
},
},
};
});
The Error:
I only want use the styled component theme inside the materialUi 4.
you can see the prop here:

Answer 1

I solved this problem typing like this:
fill: (props: DefaultTheme['colors']) => props.blue500,