nebel/_
1
0
Fork 0
mirror of https://github.com/kou029w/_.git synced 2025-01-30 22:08:02 +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

72
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,39 +30,53 @@ 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 }) => (
<ThemeProvider theme={theme}>
<Head>
<meta
name="viewport"
content="width=device-width,minimum-scale=1,initial-scale=1"
/>
<meta name="theme-color" content={theme.palette.primary.main} />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Noto+Sans+JP"
/>
</Head>
<CssBaseline />
<MDXProvider components={components}>
<Typography component="div" variant="body1">
<TopAppBar />
<Grid container>{children}</Grid>
</Typography>
</MDXProvider>
</ThemeProvider>
);
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
name="viewport"
content="width=device-width,minimum-scale=1,initial-scale=1"
/>
<meta name="theme-color" content={theme.palette.primary.main} />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Noto+Sans+JP"
/>
</Head>
<CssBaseline />
<MDXProvider components={components}>
<Typography component="div" variant="body1">
<TopAppBar />
<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>