nebel/_
1
0
Fork 0
mirror of https://github.com/kou029w/_.git synced 2025-01-31 06:18:07 +00:00
Code Issues Projects Releases Wiki Activity

見た目を整える

Browse source
This commit is contained in:
Nebel 2019-04-23 22:31:38 +09:00
parent d775ea9d73
commit 612fef6b90
2 changed files with 45 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
styles/MainTheme.tsx
View file

@ -1,5 +1,5 @@
import "./boot"; import "./boot";
import { ThemeProvider } from "@material-ui/styles"; import { ThemeProvider, makeStyles } from "@material-ui/styles";
import { import {
CssBaseline, CssBaseline,
createMuiTheme, createMuiTheme,
@ -30,20 +30,31 @@ export const theme = createMuiTheme({
}); });
export const components = { export const components = {
h1: (props: {}) => <Typography variant="h1" {...props} />, h1: (props: {}) => <Typography component="h1" variant="h3" {...props} />,
h2: (props: {}) => <Typography variant="h2" {...props} />, h2: (props: {}) => <Typography component="h2" variant="h4" {...props} />,
h3: (props: {}) => <Typography variant="h3" {...props} />, h3: (props: {}) => <Typography component="h3" variant="h5" {...props} />,
h4: (props: {}) => <Typography variant="h4" {...props} />, h4: (props: {}) => <Typography component="h4" variant="h6" {...props} />,
h5: (props: {}) => <Typography variant="h5" {...props} />, h5: (props: {}) => <Typography component="h5" variant="h6" {...props} />,
h6: (props: {}) => <Typography variant="h6" {...props} />, h6: (props: {}) => <Typography variant="h6" {...props} />,
a: ({ href, ...props }: { href: string }) => ( a: ({ href, ...props }: { href: string }) => (
<Link prefetch href={href}> <Link prefetch href={href}>
<MuiLink variant="body1" href={href} {...props} /> <MuiLink variant="body1" color="secondary" href={href} {...props} />
</Link> </Link>
) )
}; };
const MainTheme: React.FC<{}> = ({ children }) => ( const useStyles = makeStyles({
container: {
padding: [8, 3, 1].map(n => `${n * theme.spacing.unit}px`).join(" "),
[theme.breakpoints.up("sm")]: {
padding: [9, 4, 1].map(n => `${n * theme.spacing.unit}px`).join(" ")
}
}
});
const MainTheme: React.FC<{}> = ({ children }) => {
const classes = useStyles();
return (
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<Head> <Head>
<meta <meta
@ -60,9 +71,12 @@ const MainTheme: React.FC<{}> = ({ children }) => (
<MDXProvider components={components}> <MDXProvider components={components}>
<Typography component="div" variant="body1"> <Typography component="div" variant="body1">
<TopAppBar /> <TopAppBar />
<Grid container>{children}</Grid> <Grid className={classes.container} container>
{children}
</Grid>
</Typography> </Typography>
</MDXProvider> </MDXProvider>
</ThemeProvider> </ThemeProvider>
); );
};
export default MainTheme; export default MainTheme;

4
styles/TopAppBar.tsx
View file

@ -14,10 +14,10 @@ const TopAppBar: React.FC = () => {
const classes = useStyles(); const classes = useStyles();
return ( return (
<div className={classes.root}> <div className={classes.root}>
<AppBar position="static"> <AppBar color="default">
<Toolbar> <Toolbar>
<Link href="/"> <Link href="/">
<IconButton color="inherit"> <IconButton>
<Home /> <Home />
</IconButton> </IconButton>
</Link> </Link>