1- import { makeStyles } from "@mui/styles" ;
2- import { MemoizedMarkdown } from "components/Markdown/Markdown" ;
3- import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout" ;
1+ import { useTheme } from "@emotion/react" ;
42import frontMatter from "front-matter" ;
53import { Helmet } from "react-helmet-async" ;
4+ import { MemoizedMarkdown } from "components/Markdown/Markdown" ;
5+ import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout" ;
66import { pageTitle } from "utils/page" ;
77
88export default function TemplateDocsPage ( ) {
99const { template, activeVersion} = useTemplateLayoutContext ( ) ;
10- const styles = useStyles ( ) ;
10+ const theme = useTheme ( ) ;
1111
1212const readme = frontMatter ( activeVersion . readme ) ;
1313
@@ -17,35 +17,34 @@ export default function TemplateDocsPage() {
1717< title > { pageTitle ( `${ template . name } ) } </ title >
1818</ Helmet >
1919
20- < div className = { styles . markdownSection } id = "readme" >
21- < div className = { styles . readmeLabel } > README.md</ div >
22- < div className = { styles . markdownWrapper } >
20+ < div
21+ css = { {
22+ background :theme . palette . background . paper ,
23+ border :`1px solid${ theme . palette . divider } ,
24+ borderRadius :theme . shape . borderRadius ,
25+ } }
26+ id = "readme"
27+ >
28+ < div
29+ css = { {
30+ color :theme . palette . text . secondary ,
31+ fontWeight :600 ,
32+ padding :theme . spacing ( 2 , 3 ) ,
33+ borderBottom :`1px solid${ theme . palette . divider } ,
34+ } }
35+ >
36+ README.md
37+ </ div >
38+ < div
39+ css = { {
40+ padding :theme . spacing ( 0 , 3 , 5 ) ,
41+ maxWidth :800 ,
42+ margin :"auto" ,
43+ } }
44+ >
2345< MemoizedMarkdown > { readme . body } </ MemoizedMarkdown >
2446</ div >
2547</ div >
2648</ >
2749) ;
2850}
29-
30- export const useStyles = makeStyles ( ( theme ) => {
31- return {
32- markdownSection :{
33- background :theme . palette . background . paper ,
34- border :`1px solid${ theme . palette . divider } ,
35- borderRadius :theme . shape . borderRadius ,
36- } ,
37-
38- readmeLabel :{
39- color :theme . palette . text . secondary ,
40- fontWeight :600 ,
41- padding :theme . spacing ( 2 , 3 ) ,
42- borderBottom :`1px solid${ theme . palette . divider } ,
43- } ,
44-
45- markdownWrapper :{
46- padding :theme . spacing ( 0 , 3 , 5 ) ,
47- maxWidth :800 ,
48- margin :"auto" ,
49- } ,
50- } ;
51- } ) ;