Wie verwendet man Variablen, die aus einer .scss-Datei exportiert wurden, um ein Material-UI-Thema zu erstellen?

stimmen
44

Ich versuche, einige Variablen zu verwenden, die aus einer globalen .scssDatei exportiert wurden, um ein Material-UI-Thema zu erstellen. Probleme treten auf, weil sich diese Variablen auf dem Server befinden undefined(ich benutze sie, next.jsdamit die Seiten vorgerendert werden). Wie kann das funktionieren?

Fehler, den ich bekomme (weil alle Farben sindundefined):

Error: Material-UI: The color provided to augmentColor(color) is invalid.
The color object needs to have a `main` property or a `500` property.

Hier sind die wichtigen Teile meiner Anwendung.

_app.jsx

// General imports
import React from 'react';

// Components import
import App from 'next/app';
import { createMuiTheme, ThemeProvider, CssBaseline, StylesProvider, jssPreset } from '@material-ui/core';
import { create } from 'jss';

// Global styles and colors import
import '../styles/global.scss';
import colors from '../styles/colors.scss';

if (typeof document !== 'undefined') {
  const styleNode = document.createComment('jss-insertion-point');
  document.head.insertBefore(styleNode, document.head.firstChild);
}

/**
 * Material-UI theme.
 *
 * @type {Object}
 */
const theme = createMuiTheme({
  palette: {
    primary: {
      main: colors.primary,
      contrastText: colors.primaryText
    },
    secondary: {
      main: colors.secondary,
      contrastText: colors.secondaryText
    }
  }
});

class CustomApp extends App {
  /**
   * Handles the componentDidMount lifecycle event.
   *
   * @memberof MyApp
   */
  componentDidMount() {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }

  /**
   * Renders the component.
   *
   * @returns component's elements
   * @memberof CustomApp
   */
  render() {
    const {
      Component,
      pageProps
    } = this.props;

    return (
     <>
        <StylesProvider
          jss={
            create({
              ...jssPreset(),
              // Define a custom insertion point that JSS will look for when injecting the styles into the DOM.
              insertionPoint: 'jss-insertion-point'
            })
          }
        >
          <ThemeProvider theme={theme}>
            <CssBaseline />
            <Component {...pageProps} />
          </ThemeProvider>
        </StylesProvider>
      </>
    );
  }
}

export default CustomApp;

_Dokument.jsx

// General imports
import React from 'react';

// Components import
import Document, { Head, Main, NextScript } from 'next/document';
import { ServerStyleSheets } from '@material-ui/core';

/**
 *
 *
 * @class CustomDocument
 * @extends {Document}
 */
class CustomDocument extends Document {
  render() {
    return (
      <html lang=en>
        <Head>
          <meta charSet=utf-8 />
          <link rel=icon href=/favicon.ico />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

CustomDocument.getInitialProps = async (ctx) => {
  // Render app and page and get the context of the page with collected side effects.
  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () => originalRenderPage({
    enhanceApp: (App) => (props) => sheets.collect(<App isServer {...props} />)
  });

  const initialProps = await Document.getInitialProps(ctx);

  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
    isServer: false
  };
};

export default CustomDocument;

farben.scss

$color-primary: #2aa876;
$color-primary-text: #ffffff;
$color-secondary: #ffd265;
$color-secondary-text: #7e621d;

:export {
  primary: $color-primary;
  primaryText: $color-primary-text;
  secondary: $color-secondary;
  secondaryText: $color-secondary-text;
}
Veröffentlicht am 10/06/2020 um 13:21
quelle vom benutzer
In anderen Sprachen...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more