Material UI 4中引入Styled Components主题到makeStyles遇错误求助

需求：在Material UI 4中，将Styled Components的默认主题传入makeStyles使用。根组件通过useTheme获取Styled Components主题，将theme.colors传入自定义的useStyles，但编写样式时设置MuiStepIcon-text的fill属性出现类型错误，需解决该问题。

根组件代码 #

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;

样式文件代码（原错误版本） #

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',
      },
    },
  };
});

错误信息 #

传入的props截图 #

解决方法 #

问题出在useStyles中对props的类型定义错误：你传入的是完整的colors对象（DefaultTheme['colors']类型），但却把props声明为keyof DefaultTheme['colors']（即colors对象的键名类型），导致类型不匹配。

修改样式文件中的useStyles，修正props类型即可：

import { makeStyles } from '@material-ui/core/styles';
import { DefaultTheme } from 'styled-components';

export const useStyles = makeStyles(() => {
  return {
    modal: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    },
    stepperRoot: {
      '& .MuiStepConnector-lineHorizontal': {
        display: 'none',
      },
      '& .MuiStepIcon-root': {
        fontSize: '3rem',
        fill: 'transparent',
        border: '1px solid',
        borderRadius: '100%',
      },
      '& .MuiStepIcon-text': {
        // 修正props类型为完整的colors对象
        fill: (props: DefaultTheme['colors']) => props.blue500,
        fontSize: '13px',
      },
    },
  };
});

说明 #

• 根组件中传入useStyles的是theme.colors，也就是DefaultTheme['colors']类型的对象，所以在makeStyles的样式回调中，props的类型必须与之对应。
• 修正后，props.blue500就能正确访问到colors对象中的颜色值，类型错误也会消失。

内容的提问来源于stack exchange，提问作者Thiago Lessa