Hello, I am using Gatsby and Netlify, and I have styled the whole website using theme-ui. Everything seems to work and I think the templates are working on the cms because it doesn’t show the label ‘title’, but all the style is lost.
How can I use theme-ui styles on the preview pages in the cms?
Thanks you!
Hi @anac and welcome!
When using Gatsby and Netlify CMS it is recommened to use the Gatsby CMS Plugin which will try to register any styles that you’re using from your site to be available in your preview templates.
You can also register styles directly via Creating Custom Previews | Netlify CMS | Open-Source Content Management System
Also, can you share an example repo with your issue? That will make it easier to pinpoint the cause.
Hello, thank you for your reply. I am actually using Gatsby CMS Plugin but on admin it seems that it doesn’t apply the fonts, or colours or font sizes.
This would be cms.js:
import CMS from ‘netlify-cms-app’
// import { GlobalStyle } from ‘…/theme/global-style’
import WhoPagePreview from './preview-templates/WhoPagePreview'
import ReportPagePreview from './preview-templates/ReportPagePreview'
import ContactPagePreview from './preview-templates/ContactPagePreview'
import IndexPagePreview from './preview-templates/IndexPagePreview'
// CMS.registerPreviewStyle(GlobalStyle)
CMS.registerPreviewTemplate('index', IndexPagePreview)
CMS.registerPreviewTemplate('who-page', WhoPagePreview)
CMS.registerPreviewTemplate('report-page', ReportPagePreview)
CMS.registerPreviewTemplate('contact-page', ContactPagePreview)
IndexPagePreview:
import React from 'react'
import PropTypes from 'prop-types'
import { IndexPageTemplate } from '../../templates/index-page'
const IndexPagePreview = ({ entry }) => {
const data = entry.getIn(['data']).toJS()
if (data) {
return (
<IndexPageTemplate
title1={data.title1}
content1={data.content1}
title2={data.title2}
content2={data.content2}
/>
)
}
return <div>Loading...</div>
}
IndexPagePreview.propTypes = {
entry: PropTypes.shape({
getIn: PropTypes.func,
}),
}
export default IndexPagePreview
and index-page.js template:
/* eslint-disable no-console */
import React from 'react'
import PropTypes from 'prop-types'
import { graphql, StaticQuery } from 'gatsby'
import { Container, Text, Box } from 'theme-ui'
import Layout from '../components/Layout'
import Markdown from '../components/markdown'
import theme from '../theme'
export const IndexPageTemplate = ({ title1, content1, title2, content2 }) => (
<Container mt={[4, 5]} mb={[3, 4]}>
<Box pb={[3, 3, 3, 4, 4]}>
{title1 && (
<Box
sx={{
backgroundColor: theme.titles.backgroundColor,
width: 'fit-content',
py: [2, 2, 2, 2, 2],
px: [3, 3, 3, 3, 3],
color: theme.titles.textColor,
}}
>
<Text as="h2" sx={{ variant: 'styles.h2' }}>
{title1}
</Text>
</Box>
)}
{content1 && (
<Box py={[3, 3, 3, 4, 4]}>
<Markdown content={content1} />
</Box>
)}
</Box>
<Box pb={[3, 3, 3, 4, 4]}>
{title2 && (
<Box
sx={{
backgroundColor: theme.titles.backgroundColor,
width: 'fit-content',
py: [2, 2, 2, 2, 2],
px: [3, 3, 3, 3, 3],
color: theme.titles.textColor,
}}
>
<Text as="h2" sx={{ variant: 'styles.h2' }}>
{title2}
</Text>
</Box>
)}
{content2 && (
<Box py={[3, 3, 3, 4, 4]}>
<Markdown content={content2} />
</Box>
)}
</Box>
</Container>
)
IndexPageTemplate.propTypes = {
title1: PropTypes.string,
content1: PropTypes.string,
title2: PropTypes.string,
content2: PropTypes.string,
}
const IndexPage = ({
data: {
markdownRemark: { frontmatter: data },
},
}) => (
<Layout>
<IndexPageTemplate {...data} />
</Layout>
)
IndexPage.propTypes = {
data: PropTypes.shape({
markdownRemark: PropTypes.shape({
frontmatter: PropTypes.shape({
data: PropTypes.shape({}),
}),
}).isRequired,
}).isRequired,
}
export default () => (
<StaticQuery
query={graphql`
query IndexPageQuery {
markdownRemark(frontmatter: { templateKey: { eq: "index-page" } }) {
frontmatter {
content1
content2
title1
title2
}
}
}
`}
render={(data) => <IndexPage data={data} />}
/>
)
config.yml
backend:
name: git-gateway
branch: master
commit_messages:
create: 'Create {{collection}} “{{slug}}”'
update: 'Update {{collection}} “{{slug}}”'
delete: 'Delete {{collection}} “{{slug}}”'
uploadMedia: '[skip ci] Upload “{{path}}”'
deleteMedia: '[skip ci] Delete “{{path}}”'
media_folder: static/img
public_folder: /img
collections:
- name: 'pages'
label: 'Pages'
files:
- file: 'src/pages/index.md'
label: 'Homepage'
name: 'index'
fields:
- {
label: 'Template Key',
name: 'templateKey',
widget: 'hidden',
default: 'index-page',
}
- { label: 'Title', name: 'title1', widget: 'string', required: false }
- {
label: 'Content',
name: 'content1',
widget: 'markdown',
required: false,
}
- { label: 'Title', name: 'title2', widget: 'string', required: false }
- {
label: 'Content',
name: 'content2',
widget: 'markdown',
required: false,
}
- file: 'src/pages/who/index.md'
label: 'Who Page'
name: 'who-page'
fields:
- {
label: 'Template Key',
name: 'templateKey',
widget: 'hidden',
default: 'who-page',
}
- { label: 'Published', name: 'published', widget: 'boolean', default: true }
- { label: 'Title', name: 'title1', widget: 'string', required: false }
- {
label: 'Content',
name: 'content1',
widget: 'markdown',
required: false,
}
- { label: 'Title', name: 'title2', widget: 'string', required: false }
- {
label: 'Content',
name: 'content2',
widget: 'markdown',
required: false,
}
- file: 'src/pages/report/index.md'
label: 'Report Page'
name: 'report-page'
fields:
- {
label: 'Template Key',
name: 'templateKey',
widget: 'hidden',
default: 'report-page',
}
- { label: 'Title', name: 'title', widget: 'markdown', required: false }
- {
label: 'Intro',
name: 'intro',
widget: 'markdown',
required: false,
}
- {
label: 'Content',
name: 'reportContent',
widget: object,
fields:
[
{
label: 'Subsections',
name: 'subsections',
widget: 'list',
fields:
[
{
label: 'Title',
name: 'subsectionTitle',
widget: 'string',
required: false,
},
{
label: Content,
name: subsectionContent,
widget: markdown,
required: false,
},
],
},
],
}
- file: 'src/pages/contact/index.md'
label: 'Contact'
name: 'contact-page'
fields:
- {
label: 'Template Key',
name: 'templateKey',
widget: 'hidden',
default: 'contact-page',
}
- { label: 'Title', name: 'title', widget: 'string', required: false }
- {
label: 'Content',
name: 'content',
widget: 'markdown',
required: false,
}
Not sure if this is enough. Thank you again.
Hi @anac and thank you for the additional information.
I’m not sure how gatsby-plugin-theme-ui plugin works, but I’m pretty sure it should be included before the CMS plugin in your gatsby-config.js.
Can you verify that this is the case?
If that is already the case, we’ll need to dig in dipper on how the gatsby-plugin-theme-ui applies the styles via the sx property.
Also, does it happen for both development and prod builds?
For prod builds I would examine the generated public/admin directory to see if styles are applied/included.