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

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;

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);

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;

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;