Theme styles does not applied

[morshedx]

None of the following styles from theme.js applied to their tag except root in body. All of the value provided in styles are defined above. What's the reason?

Config:

"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3",
"theme-ui": "^0.3.5",

[lachlanjc]

Hey! This doesn't have enough context to debug. Can you show your usage of ThemeProvider & the configuration flags (useBodyStyles etc) in your theme?

[morshedx]

Sure, although i did not use any configuration flags.

index.js

import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from 'theme-ui';
import './index.css';
import App from './App';
// import i18n (needs to be bundled ;))
import './i18n';
import defaultTheme from 'theme/theme';

import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={defaultTheme}>
      <Suspense fallback={<div>Loading...</div>}>
        <App />
      </Suspense>
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

theme.js

export default {
  breakpoints: [],
  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
  fonts: {
    body: `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif`,
    heading: 'inherit',
    monospace: 'Menlo, monospace',
  },
  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 96],
  fontWeights: {
    body: 400,
    heading: 700,
    bold: 700,
  },
  lineHeights: {
    body: 1.5,
    heading: 1.125,
  },
  colors: {
    text: '#111',
    textAlt: '#343D48',
    background: '#fff',
    primary: '#EA3A60',
    secondary: '#3f3f3f',
    muted: '#e0e0e0',
    highlight: '#9f9f9f',
    gray: '#6c6c6c',
    accent: '#3f3f3f',
    modes: {
      dark: {
        text: '#fff',
        background: '#000',
        primary: '#0cf',
      },
    },
  },
  shadows: {
    default: `0 1px 2px 0 rgba(60, 64, 67, 0.05), 0 2px 6px 2px rgba(60, 64, 67, 0.05)`,
  },
  text: {
    heading: {
      fontFamily: 'heading',
      lineHeight: 'heading',
      fontWeight: 'heading',
    },
  },
  layout: {
    container: {
      paddingLeft: [5],
      paddingRight: [5],
      mx: 'auto',
    },
    main: {},
  },
  styles: {
    root: {
      backgroundColor: 'background',
      fontFamily: 'body',
      lineHeight: 'body',
      fontWeight: 'body',
    },
    a: {
      color: 'text',
      textDecoration: 'none',
    },
    h1: {
      variant: 'text.heading',
      fontSize: 5,
    },
    h2: {
      variant: 'text.heading',
      fontSize: 4,
    },
    h3: {
      variant: 'text.heading',
      fontSize: 3,
    },
    h4: {
      variant: 'text.heading',
      fontSize: 2,
    },
    h5: {
      variant: 'text.heading',
      fontSize: 1,
    },
    h6: {
      variant: 'text.heading',
      fontSize: 0,
    },
    pre: {
      fontFamily: 'monospace',
      overflowX: 'auto',
      code: {
        color: 'inherit',
      },
    },
    code: {
      fontFamily: 'monospace',
      fontSize: 'inherit',
    },
    table: {
      width: '100%',
      borderCollapse: 'separate',
      borderSpacing: 0,
    },
    th: {
      textAlign: 'left',
      borderBottomStyle: 'solid',
    },
    td: {
      textAlign: 'left',
      borderBottomStyle: 'solid',
    },
  },
};

[hasparus]

Styles defined in theme.styles don't cascade outside of <BaseStyles />.