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

Typographyなど

Browse source
This commit is contained in:
Nebel 2019-04-23 18:52:12 +09:00
parent 4cfc54cfd0
commit 9b63fc5230
8 changed files with 46 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
pages/_app.tsx
View file

@ -1,7 +1,6 @@
import React from "react";
import App, { Container } from "next/app";
import MainTheme from "../styles/MainTheme";
import TopAppBar from "../styles/TopAppBar";
export default class extends App {
render() {
@ -9,7 +8,6 @@ export default class extends App {
return (
<Container>
<MainTheme>
<TopAppBar />
<Component {...pageProps} />
</MainTheme>
</Container>

3
pages/about.md Normal file
View file

@ -0,0 +1,3 @@
# About
- [Back to Home](/)

7
pages/about.mdx
View file

@ -1,7 +0,0 @@
import Link from "next/link";
# About
<Link href="/">
<a>Back to Home</a>
</Link>

3
pages/index.md Normal file
View file

@ -0,0 +1,3 @@
# Hello Next.js
- [/about](/about)

7
pages/index.mdx
View file

@ -1,7 +0,0 @@
import Link from "next/link";
# Hello Next.js
<Link href="/about">
<a>/about</a>
</Link>

34
styles/MainTheme.tsx
View file

@ -1,9 +1,18 @@
import "./boot";
import { ThemeProvider } from "@material-ui/styles";
import { CssBaseline, createMuiTheme } from "@material-ui/core";
import {
CssBaseline,
createMuiTheme,
Typography,
Link as MuiLink,
Grid
} from "@material-ui/core";
import { orange, teal } from "@material-ui/core/colors";
import React from "react";
import { MDXProvider } from "@mdx-js/tag";
import React, { ReactElement } from "react";
import Head from "next/head";
import Link from "next/link";
import TopAppBar from "./TopAppBar";
export const theme = createMuiTheme({
palette: {
@ -20,6 +29,20 @@ 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} />,
h6: (props: {}) => <Typography variant="h6" {...props} />,
a: ({ href, ...props }: { href: string }) => (
<Link href={href}>
<MuiLink variant="body1" href={href} {...props} />
</Link>
)
};
const MainTheme: React.FC<{}> = ({ children }) => (
<ThemeProvider theme={theme}>
<Head>
@ -34,7 +57,12 @@ const MainTheme: React.FC<{}> = ({ children }) => (
/>
</Head>
<CssBaseline />
{children}
<MDXProvider components={components}>
<Typography component="div" variant="body1">
<TopAppBar />
<Grid container>{children}</Grid>
</Typography>
</MDXProvider>
</ThemeProvider>
);
export default MainTheme;

8
tsconfig.json
View file

@ -3,10 +3,7 @@
"allowJs": true,
"allowSyntheticDefaultImports": true,
"jsx": "preserve",
"lib": [
"dom",
"es2017"
],
"lib": ["dom", "es2017"],
"module": "esnext",
"moduleResolution": "node",
"noEmit": true,
@ -20,6 +17,7 @@
"noImplicitAny": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"target": "esnext"
"target": "esnext",
"typeRoots": ["node_modules/@types", "types"]
}
}

6
types/@mdx-js/tag.d.ts vendored Normal file
View file

@ -0,0 +1,6 @@
declare module "@mdx-js/tag" {
class MDXProvider extends React.Component<{
components: any;
childlen?: ReactNode;
}> {}
}