具有较少样式的Material Ui 3

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

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#1976d2', // 自定义主色
    },
    secondary: {
      main: '#dc004e', // 自定义次色
    },
  },
  typography: {
    fontFamily: 'Arial, sans-serif', // 自定义字体
  },
  overrides: {
    // 自定义组件样式
    MuiButton: {
      root: {
        borderRadius: 8, // 自定义按钮圆角
      },
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button color="primary">自定义按钮</Button>
    </ThemeProvider>
  );
}

export default App;

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

const styles = {
  customButton: {
    backgroundColor: '#f50057',
    color: '#fff',
    '&:hover': {
      backgroundColor: '#ab003c',
    },
  },
};

function CustomButton({ classes }) {
  return <Button className={classes.customButton}>自定义按钮</Button>;
}

export default withStyles(styles)(CustomButton);

/* styles.css */
.custom-button {
  background-color: #f50057;
  color: white;
  border-radius: 8px;
}

.custom-button:hover {
  background-color: #ab003c;
}

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

function App() {
  return (
    <Button className="custom-button">自定义按钮</Button>
  );
}

export default App;

import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

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

function App() {
  return (
    <Button sx={{ backgroundColor: 'primary.main', borderRadius: 2 }}>
      自定义按钮
    </Button>
  );
}