首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何将道具动态发送到material UI中的样式钩子?

在 Material-UI(现在称为 MUI)中,您可以使用样式钩子(如 makeStylesstyled)来创建动态样式。要将道具动态发送到样式钩子,您可以使用以下方法。

使用 makeStyles

如果您使用的是 makeStyles,可以通过将道具传递给样式函数来实现动态样式。以下是一个示例:

代码语言:javascript
复制
import React from 'react';
import { makeStyles } from '@mui/styles';
import Button from '@mui/material/Button';

const useStyles = makeStyles((theme) => ({
  root: (props) => ({
    backgroundColor: props.color || theme.palette.primary.main,
    color: theme.palette.common.white,
    padding: theme.spacing(1, 2),
    '&:hover': {
      backgroundColor: props.hoverColor || theme.palette.primary.dark,
    },
  }),
}));

const DynamicButton = ({ color, hoverColor, children }) => {
  const classes = useStyles({ color, hoverColor });

  return (
    <Button className={classes.root}>
      {children}
    </Button>
  );
};

export default DynamicButton;

代码说明

  1. 导入必要的模块:导入 makeStyles 和 Material-UI 的组件。
  2. 定义样式:在 useStyles 中,您可以定义一个样式对象,并使用传入的道具(props)来动态设置样式。例如,您可以根据 colorhoverColor 属性来设置按钮的背景色。
  3. 使用样式:在组件中调用 useStyles,并将道具传递给它。然后,您可以将生成的类应用于组件。

使用 styled

如果您使用的是 styled API,您可以通过以下方式实现动态样式:

代码语言:javascript
复制
import React from 'react';
import { styled } from '@mui/material/styles';
import Button from '@mui/material/Button';

const DynamicButton = styled(Button)(({ theme, color, hoverColor }) => ({
  backgroundColor: color || theme.palette.primary.main,
  color: theme.palette.common.white,
  padding: theme.spacing(1, 2),
  '&:hover': {
    backgroundColor: hoverColor || theme.palette.primary.dark,
  },
}));

const App = () => {
  return (
    <DynamicButton color="green" hoverColor="darkgreen">
      Dynamic Styled Button
    </DynamicButton>
  );
};

export default App;

代码说明

  1. 导入必要的模块:导入 styled 和 Material-UI 的组件。
  2. 定义动态组件:使用 styled 创建一个动态按钮组件。您可以在样式函数中访问 theme 和道具(如 colorhoverColor),并根据这些道具设置样式。
  3. 使用组件:在应用中使用 DynamicButton,并传递所需的道具。
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券