AdhocstylinginMaterial-UI5

在Material-UI 5中，可以使用Adhoc styling来为组件添加样式。这种方式允许我们使用类似于普通CSS类的语法来定义组件样式，而无需创建单独的样式表或样式对象。

以下是一个示例代码，演示如何在Material-UI 5中使用Adhoc styling：

import { Button } from '@mui/material';

function MyButton(props) {
  return (
    <Button
      sx={{
        color: 'white',
        backgroundColor: 'blue',
        '&:hover': {
          backgroundColor: 'darkblue',
        },
      }}
      {...props}
    />
  );
}

在上面的示例中，我们首先引入了@mui/material库中的Button组件。然后，我们定义了一个名为MyButton的函数组件，该组件使用了Button组件并传递了一个名为sx的props对象。

在sx对象中，我们可以以类似于CSS的方式定义样式，例如color: 'white'表示文本颜色为白色，backgroundColor: 'blue'表示背景颜色为蓝色，&:hover表示鼠标悬停时的样式。这些样式将作用于渲染出来的Button组件。

通过这种方式，我们可以快速轻松地为组件添加自定义样式，而无需繁琐地创建单独的样式表或样式对象。