Material UI、React和样式设置部分组件，而不是所有组件

在使用Material-UI和React时，你可以通过多种方式为特定组件设置样式，而不是所有组件。以下是几种常见的方法：

使用makeStyles和withStyles：这是Material-UI提供的两种主要的样式解决方案。
使用styled-components：这是一个流行的CSS-in-JS库，可以与Material-UI一起使用。
使用内联样式：直接在组件中使用内联样式。

方法1：使用`makeStyles`

makeStyles是Material-UI提供的一个钩子，用于创建样式。

示例代码

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles((theme) => ({
  customButton: {
    backgroundColor: 'blue',
    color: 'white',
    '&:hover': {
      backgroundColor: 'darkblue',
    },
  },
}));

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

  return (
    <Button className={classes.customButton}>
      Custom Styled Button
    </Button>
  );
}

export default CustomButton;

方法2：使用`withStyles`

withStyles是一个高阶组件，用于为组件添加样式。

示例代码

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const styles = {
  customButton: {
    backgroundColor: 'blue',
    color: 'white',
    '&:hover': {
      backgroundColor: 'darkblue',
    },
  },
};

function CustomButton(props) {
  const { classes } = props;

  return (
    <Button className={classes.customButton}>
      Custom Styled Button
    </Button>
  );
}

export default withStyles(styles)(CustomButton);

方法3：使用`styled-components`

styled-components是一个流行的CSS-in-JS库，可以与Material-UI一起使用。

安装`styled-components`

npm install styled-components

示例代码

import React from 'react';
import styled from 'styled-components';
import Button from '@material-ui/core/Button';

const CustomButton = styled(Button)`
  background-color: blue;
  color: white;
  &:hover {
    background-color: darkblue;
  }
`;

function App() {
  return (
    <CustomButton>
      Custom Styled Button
    </CustomButton>
  );
}

export default App;

方法4：使用内联样式

你可以直接在组件中使用内联样式。

示例代码

import React from 'react';
import Button from '@material-ui/core/Button';

function CustomButton() {
  const customStyle = {
    backgroundColor: 'blue',
    color: 'white',
    '&:hover': {
      backgroundColor: 'darkblue',
    },
  };

  return (
    <Button style={customStyle}>
      Custom Styled Button
    </Button>
  );
}

export default CustomButton;