react Material UI 版本5.12.2 如何通过ID控制Button组件背景色

你可以使用`makeStyles`函数来创建一个样式对象，并使用该对象中的`root`属性来设置`Button`组件的背景色。具体实现可以参考下面的代码示例：

import { Button, makeStyles } from '@material-ui/core';

const useStyles = makeStyles({
  root: {
    backgroundColor: 'red', // 设置背景色为红色
  },
});

function MyButton() {
  const classes = useStyles();

  return (
    <Button id="my-button" className={classes.root}>
      Click me!
    </Button>
  );
}

在上面的代码中，我们使用`makeStyles`函数创建了一个样式对象，并在其中定义了一个`root`属性，该属性设置了`Button`组件的背景色为红色。然后，我们在`MyButton`组件中使用该样式对象，并将其应用到`Button`组件的`className`属性中，从而实现了通过`id`控制`Button`组件背景色的效果。

相关问题

react Material UI 版本5.12.2 ButtonGroup组 点击后样式属性

React Material UI ButtonGroup 组件在点击后的样式属性可以通过 `MuiButtonGroup-grouped` 类来进行控制。你可以通过 CSS 或者使用 `sx` prop 来自定义样式。以下是一个例子：

import ButtonGroup from '@mui/material/ButtonGroup';
import Button from '@mui/material/Button';

function Example() {
  return (
    <ButtonGroup
      variant="contained"
      aria-label="outlined primary button group"
      sx={{
        '& .MuiButtonGroup-grouped:not(:first-of-type)': {
          borderColor: 'red',
          backgroundColor: 'white',
        },
        '& .MuiButtonGroup-grouped:hover': {
          backgroundColor: 'red',
        },
      }}
    >
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Three</Button>
    </ButtonGroup>
  );
}

在上面的例子中，`& .MuiButtonGroup-grouped:not(:first-of-type)` 选择器控制了除了第一个按钮以外的按钮的样式，`& .MuiButtonGroup-grouped:hover` 控制了鼠标悬停在按钮上时的样式。你可以根据自己的需要进行更改。

react Material UI 版本5.12.2 ButtonGroup组 完整中文文档

React Material UI 的 ButtonGroup 组件是一个用于组合多个按钮的组件。它可以使多个按钮在视觉上形成一组，从而使用户更容易识别它们之间的相关性。以下是 ButtonGroup 组件的完整中文文档：

# ButtonGroup

用于呈现一组按钮。

## 引入

import ButtonGroup from '@mui/material/ButtonGroup';
import Button from '@mui/material/Button';

或

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

## 示例

<ButtonGroup variant="contained" aria-label="outlined primary button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>

## API

### ButtonGroup Props

| 名称 | 类型 | 默认值 | 描述 |
| ------------ | ------------------------------ | ------ | -------------------------------------------------------------------------------------------------------------- |
| children | node | | 要呈现的按钮 |
| color | 'default' \| 'inherit' \| 'primary' \| 'secondary' | 'primary' | 按钮的颜色 |
| disableElevation | bool | false | 是否禁用按钮海拔高度 |
| disableFocusRipple | bool | false | 是否禁用按钮的聚焦涟漪效果 |
| disabled | bool | false | 是否禁用按钮 |
| fullWidth | bool | false | 是否使按钮组的宽度为 100% |
| size | 'small' \| 'medium' \| 'large' | 'medium' | 按钮的大小 |
| sx | SxProps<Theme> | | 应用于根元素的样式 |
| variant | 'text' \| 'contained' \| 'outlined' | 'outlined' | 按钮的类型 |

继承自 [ButtonBaseProps](/api/button-base/#props)

| 名称 | 类型 | 默认值 | 描述 |
| ------------ | ---------------------- | ------ | ---------------------------------------------------------------------------------------------------------------- |
| centerRipple | bool | false | 是否在按钮中心显示涟漪效果 |
| component | elementType \| string | 'button' | 组件或 HTML 标签名称，该组件应用于根元素。如果未提供，则将使用默认的 button 元素。 |
| disabled | bool | false | 是否禁用按钮 |
| disableRipple | bool | false | 是否禁用按钮的涟漪效果 |
| focusRipple | bool | true | 是否在聚焦按钮时显示涟漪效果 |
| onFocusVisible | func | | 调用聚焦可见时的回调函数。参数：event: object。 |
| tabIndex | oneOfType([number, string]) | | 根元素的 tabIndex 属性 |

## 注意事项

请注意，ButtonGroup 组件仅用于组合 Button 组件。如果您需要呈现其他类型的内容，请考虑使用其他组件，如 Grid 或 Flexbox。