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

72
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,39 +30,53 @@ 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({
<ThemeProvider theme={theme}> container: {
<Head> padding: [8, 3, 1].map(n => `${n * theme.spacing.unit}px`).join(" "),
<meta [theme.breakpoints.up("sm")]: {
name="viewport" padding: [9, 4, 1].map(n => `${n * theme.spacing.unit}px`).join(" ")
content="width=device-width,minimum-scale=1,initial-scale=1" }
/> }
<meta name="theme-color" content={theme.palette.primary.main} /> });
<link
rel="stylesheet" const MainTheme: React.FC<{}> = ({ children }) => {
href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" const classes = useStyles();
/> return (
</Head> <ThemeProvider theme={theme}>
<CssBaseline /> <Head>
<MDXProvider components={components}> <meta
<Typography component="div" variant="body1"> name="viewport"
<TopAppBar /> content="width=device-width,minimum-scale=1,initial-scale=1"
<Grid container>{children}</Grid> />
</Typography> <meta name="theme-color" content={theme.palette.primary.main} />
</MDXProvider> <link
</ThemeProvider> 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; 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>