Styles from theme not being applied

[danchristian]

Everything in my theme gets picked up, apart from stuff within styles. The root: stuff within styles gets picked up, but nothing else.

I've been using the font size of headings to test. So with this I would expect the fontsize for H2 to be massive and H1 to be tiny. But nothing gets applied. If I change the root: fontFamily: to monospace, then that takes effect.

I'm not sure if a misunderstanding on my part about how it should work, or something I've set up incorrectly.

<Heading>Components</Heading>

export default {
  space: {
    none: 0,
    gutter: 24,
    xxsmall: 4,
    xsmall: 8,
    small: 12,
    medium: 20,
    large: 32,
    xlarge: 48,
    xxlarge: 96,
    xxxlarge: 128,
  },
  sizes: [8, 16, 32, 64, 128, 256, 512, 768, 1024, 1420],
  breakpoints: ["40em", "56em", "64em"],
  fonts: {
    body:
      "Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif",
    heading: "Cambon, sans-serif",
    monospace: "Circular Mono, monospace",
  },
  fontSizes: [16, 20, 24, 32, 48, 64, 96],
  fontWeights: {
    body: 300,
    heading: 700,
    bold: 700,
  },
  lineHeights: {
    body: 1.4,
    heading: 1.2,
  },
  colors: {
    text: "hsl(221, 31%, 16%)",
    background: "hsl(0, 0%, 100%)",
    accent: "hsl(12, 86%, 61%)",
    blue: "hsl(221, 90%, 96%)",
  },
  text: {
    default: {
      color: "text",
      fontSize: 3,
    },
    heading: {
      fontFamily: "heading",
      lineHeight: "heading",
      fontWeight: "heading",
    },
  },
  styles: {
    h2: {
      variant: "text.heading",
      fontSize: 6,
    },
    root: {
      fontFamily: "body",
      lineHeight: "body",
      fontWeight: "body",
    },
    h1: {
      variant: "text.heading",
      fontSize: 1,
    },

    pre: {
      fontFamily: "monospace",
      overflowX: "auto",
      code: {
        color: "pink",
      },
    },
    code: {
      fontFamily: "monospace",
      fontSize: "inherit",
    },
  },
};

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@tryghost/content-api": "^1.4.8",
    "next": "^10.0.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "swr": "^0.3.8",
    "theme-ui": "^0.3.1"
  }
}

import React from "react";
import { Global, css } from "@emotion/core";
import { ThemeProvider } from "theme-ui";
import theme from "../components/theme";

const App = ({ Component, pageProps }) => {
  return (
    <ThemeProvider theme={theme}>
      <Global
        styles={css`
          "*": {
            boxsizing: "border-box";
          }
          html,
          body {
            width: 100%;
            height: 100%;
          }
          figure {
            margin: 0;
          }
          @font-face {
            font-family: "Circular";
            src: url("/fonts/circular/circular-light.woff2") format("woff2");
            font-style: normal;
            font-weight: 300;
            font-display: swap;
          }
          @font-face {
            font-family: "Circular";
            src: url("/fonts/circular/circular-bold.woff2") format("woff2");
            font-style: normal;
            font-weight: 700;
            font-display: swap;
          }
          @font-face {
            font-family: "Circular Mono";
            src: url("/fonts/circular/circular-mono.woff2") format("woff2");
            font-style: normal;
            font-weight: 400;
            font-display: swap;
          }
          @font-face {
            font-family: "Cambon";
            src: url("/fonts/cambon/cambon-bold.woff2") format("woff2");
            font-style: normal;
            font-weight: 700;
            font-display: swap;
          }
        `}
      />
      <Component {...pageProps} />
    </ThemeProvider>
  );
};

export default App;

[atanasster]

@danchristian - its probably a bit confusing, but the styles link is specific that those styles apply for MDX components only.

You can have a couple options:

1. You can add a heading key in the text theme key:

export const theme = {
  ...
  text: {
  ...
    heading: {
      fontFamily: "heading",
      lineHeight: "heading",
      fontWeight: "heading",
      fontSize: 6
    },
  },
  styles: {
  },

2. You can use the theme-ui/mdx Styled component:

  <Styled.h2>Components</Styled.h2>

3. You can use the variant prop to specify the theme key:

<Box as="h2" variant="styles.h2">Components</Box>
or
<Heading variant="styles.h2">Components</Heading >

[danchristian]

@atanasster Ah, right, I understand now. Makes sense!

[danchristian]

@atanasster I have another question!

1. In your option 1, how would you handle different font sizes for heading levels?

2. I've built a component like this, does it seem OK way of using the theme?

<Heading level="1">Test</Heading>

import { Box } from "theme-ui";

const levels = { 1: "h1", 2: "h2", 3: "h3" };

export default function Heading({ level, children }) {
  return (
    <Box as={levels[level]} sx={{ variant: `styles.${levels[level]}` }}>
      {children}
    </Box>
  );
}

[atanasster]

@danchristian - multiple levels for option 1 above can be accomplished with variants (Heading is using variants under the text key in the theme):

theme:

const fontHeading = {
  fontFamily: "heading",
  lineHeight: "heading",
  fontWeight: "heading"
};

export const theme = {
  text: {
    h1: {
      ...fontHeading,
      fontSize: 6
    },
    h2: {
      ...fontHeading,
      fontSize: 5
    },
    h3: {
      ...fontHeading,
      fontSize: 4
    }
  }
};

and your Heading component:

import React from "react";
import { Heading as ThemeUIHeading } from "theme-ui";

const levels = { 1: "h1", 2: "h2", 3: "h3" };

export default function Heading({ level, children }) {
  return (
    <ThemeUIHeading as={levels[level]} variant={levels[level]}>
      {children}
    </ThemeUIHeading>
  );
}

[danchristian]

@atanasster Thanks for this, makes sense. What is the thinking behind using the Theme components as oppose to creating custom ones? I created my own above, as at some point you will need custom ones so seemed better to have all custome rather than some pulling from Theme and some custom. But, I feel I'm probably missing something here...

[atanasster]

I guess everyone uses whatever method they prefer.
For me, i use styles.h1 etc as in your implementation so i can reuse the same styles as in an mdx document.
If you prefer to not share styles between mdx and regular react components, you can create your own variant keys.