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:47:07 +09:00
parent 612fef6b90
commit 94ba725cca
1 changed files with 15 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
styles/MainTheme.tsx
View file

@ -43,17 +43,23 @@ export const components = {
)
};
const useStyles = makeStyles({
container: {
padding: [8, 3, 1].map(n => `${n * theme.spacing.unit}px`).join(" "),
export const Container: React.FC<{}> = ({ children }) => {
const classes = makeStyles({
root: {
padding: [8, 3, 1].map(n => `${theme.spacing.unit * n}px`).join(" "),
[theme.breakpoints.up("sm")]: {
padding: [9, 4, 1].map(n => `${n * theme.spacing.unit}px`).join(" ")
padding: [9, 4, 1].map(n => `${theme.spacing.unit * n}px`).join(" ")
}
}
});
})();
return (
<Grid className={classes.root} container>
{children}
</Grid>
);
};
const MainTheme: React.FC<{}> = ({ children }) => {
const classes = useStyles();
return (
<ThemeProvider theme={theme}>
<Head>
@ -71,9 +77,7 @@ const MainTheme: React.FC<{}> = ({ children }) => {
<MDXProvider components={components}>
<Typography component="div" variant="body1">
<TopAppBar />
<Grid className={classes.container} container>
{children}
</Grid>
<Container>{children}</Container>
</Typography>
</MDXProvider>
</ThemeProvider>