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 { ThemeProvider } from "@material-ui/styles";
import { ThemeProvider, makeStyles } from "@material-ui/styles";
import {
CssBaseline,
createMuiTheme,
@ -30,20 +30,31 @@ export const theme = createMuiTheme({
});
export const components = {
h1: (props: {}) => <Typography variant="h1" {...props} />,
h2: (props: {}) => <Typography variant="h2" {...props} />,
h3: (props: {}) => <Typography variant="h3" {...props} />,
h4: (props: {}) => <Typography variant="h4" {...props} />,
h5: (props: {}) => <Typography variant="h5" {...props} />,
h1: (props: {}) => <Typography component="h1" variant="h3" {...props} />,
h2: (props: {}) => <Typography component="h2" variant="h4" {...props} />,
h3: (props: {}) => <Typography component="h3" variant="h5" {...props} />,
h4: (props: {}) => <Typography component="h4" variant="h6" {...props} />,
h5: (props: {}) => <Typography component="h5" variant="h6" {...props} />,
h6: (props: {}) => <Typography variant="h6" {...props} />,
a: ({ href, ...props }: { href: string }) => (
<Link prefetch href={href}>
<MuiLink variant="body1" href={href} {...props} />
<MuiLink variant="body1" color="secondary" href={href} {...props} />
</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}>
<Head>
<meta
@ -60,9 +71,12 @@ const MainTheme: React.FC<{}> = ({ children }) => (
<MDXProvider components={components}>
<Typography component="div" variant="body1">
<TopAppBar />
<Grid container>{children}</Grid>
<Grid className={classes.container} container>
{children}
</Grid>
</Typography>
</MDXProvider>
</ThemeProvider>
);
};
export default MainTheme;

4
styles/TopAppBar.tsx
View file

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