Material-UIのカスタムスタイル: コード例と方法の解説

1. makeStylesを使用する方法: Material-UIのスタイリングシステムでは、makeStylesというフックを使用してカスタムスタイルを定義できます。以下は使用例です:

import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: 'red',
    color: 'white',
    padding: theme.spacing(2),
  },
}));
function CustomStyledComponent() {
  const classes = useStyles();
  return <div className={classes.root}>カスタムスタイルの例</div>;
}

2. withStylesを使う方法: もう一つの方法は、withStylesを使用してスタイルを適用することです。以下は使用例です:

import { withStyles } from '@material-ui/core/styles';
const styles = (theme) => ({
  root: {
    backgroundColor: 'blue',
    color: 'white',
    padding: theme.spacing(2),
  },
});
function CustomStyledComponent(props) {
  const { classes } = props;
  return <div className={classes.root}>カスタムスタイルの例</div>;
}
export default withStyles(styles)(CustomStyledComponent);

3. ThemeProviderを使用する方法: ThemeProviderを使用すると、アプリケーション全体のテーマをカスタマイズできます。以下は使用例です:

import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#ff0000',
    },
  },
});
function App() {
  return (
    <ThemeProvider theme={theme}>
      <CustomStyledComponent />
    </ThemeProvider>
  );
}