import { createTheme } from '@mui/material/styles';

const defaultTheme = createTheme();
console.log(defaultTheme);

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { CssBaseline, Button } from '@mui/material';
import React from 'react';

const customTheme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#ff4081',
    },
  },
  typography: {
    fontFamily: 'Arial',
  },
});

function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <CssBaseline />
      <Button variant="contained" color="primary">
        カスタムテーマボタン
      </Button>
    </ThemeProvider>
  );
}

export default App;

const customTheme = createTheme({
  palette: {
    primary: {
      main: '#4caf50',
    },
    secondary: {
      main: '#ff5722',
    },
    background: {
      default: '#f5f5f5',
    },
  },
  typography: {
    fontFamily: 'Roboto, Arial',
    fontSize: 14,
  },
});

const darkTheme = createTheme({
  palette: {
    mode: 'dark',
  },
});

function App() {
  return (
    <ThemeProvider theme={darkTheme}>
      <CssBaseline />
      <Button variant="contained" color="primary">
        ダークモードボタン
      </Button>
    </ThemeProvider>
  );
}

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

function StyledBox() {
  return (
    <Box
      sx={{
        bgcolor: 'primary.main',
        color: 'white',
        padding: 2,
        borderRadius: 1,
      }}
    >
      スタイルが適用されたBox
    </Box>
  );
}

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

const useStyles = makeStyles((theme) => ({
  customButton: {
    backgroundColor: theme.palette.primary.main,
    color: 'white',
    '&:hover': {
      backgroundColor: theme.palette.primary.dark,
    },
  },
}));

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

  return <Button className={classes.customButton}>カスタムボタン</Button>;
}

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

const CustomButton = styled(Button)(({ theme }) => ({
  backgroundColor: theme.palette.secondary.main,
  color: theme.palette.common.white,
  padding: theme.spacing(2),
  '&:hover': {
    backgroundColor: theme.palette.secondary.dark,
  },
}));

function App() {
  return <CustomButton>スタイル付きボタン</CustomButton>;
}

import './CustomStyles.css';
import { Button } from '@mui/material';

function CustomClassButton() {
  return <Button className="custom-button">カスタムクラスボタン</Button>;
}

.custom-button {
  background-color: #ff5722;
  color: white;
  padding: 10px;
  border-radius: 5px;
}