使用 MUI 访问样式化组件内的道具

Question

我正在尝试在 React JS 项目中使用 MUI 创建自定义按钮组件。我检查了文档，发现我可以使用样式组件来做到这一点。一切都与下面提供的代码配合良好。问题是我想创建一个更“可定制”的组件。我的主题文件中有 2 组颜色（主要和次要）。事实是我想创建一个能够为这组颜色（主要/次要）获取道具的按钮。

import * as React from 'react';
import ButtonUnstyled, {
  buttonUnstyledClasses,
  ButtonUnstyledProps,
} from '@mui/core/ButtonUnstyled';
import { styled } from '@mui/system';
import { theme } from '../../theme';

const CustomButtonRoot = styled('button')(`
  background-color: ${theme.palette[props.type].main};
  padding: 15px 20px;
  border-radius: 10px;
  color: #fff; 
`);

interface TodoButtonProps {
    unstyledProps: ButtonUnstyledProps,
    type?: 'primary' | 'secondary'
}

function CustomButton(props: TodoButtonProps) {
  return <ButtonUnstyled {...props} component={CustomButtonRoot} />;
}

export default CustomButton

问题是：如何在样式化的组件代码中包含这个道具？

Answer 1

传递回调。在这个回调中，第一个参数是样式组件的道具。您还可以使用样式对象代替模板字符串。 this 答案中的更多详细信息。

const CustomButtonRoot = styled("button")(
  ({ theme, myColor }) => `
  padding: 15px 20px;
  border-radius: 10px;
  color: ${myColor}; 
`
);

<CustomButton myColor="red">abc</CustomButton>