Question

我正在使用 nextjs 和 material-ui。我需要作为 .ts 文件中的样式文件并在组件内使用此文件。当我处于开发模式时，它不会显示任何错误，样式完美无缺。但是当我要生成要托管的项目构建时，我遇到了 react 无法缩小 style.ts 文件中的代码的问题

我的组件 -> pages/sale/login/index.tsx

import { FormControl, TextField } from '@material-ui/core';
import Head from 'next/head';
import styles from './styles';

import { Button } from '../../../components/Button';

export default function Index() {
  const classes = styles();

  return (
    <>
      <Head>
        <title>Login</title>
      </Head>
      <div className={classes.container}>
        <div className={classes.cardLogin}>
          <FormControl className={classes.form}>
            <form>
              <div className={classes.formFirstSection}>
                <TextField
                  label="Sigla da Loja"
                  placeholder="Sigla da Loja"
                  type="text"
                  variant="outlined"
                />
                <TextField
                  label="Código da Loja"
                  placeholder="Código da Loja"
                  type="text"
                  variant="outlined"
                />
              </div>
              <TextField
                label="Senha"
                placeholder="Senha"
                type="password"
                variant="outlined"
              />
              <Button
                type="submit"
                name="Entrar"
                containerStyle={{ marginTop: '0.75rem' }}
              />
            </form>
          </FormControl>
        </div>
      </div>
    </>
  );
}

我的样式文件 -> pages/sale/login/styles.ts

import { makeStyles } from '@material-ui/core';

const styles = makeStyles((theme) => ({
  container: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100vh',
    width: '100vw',
  },
  cardLogin: {
    maxWidth: 430,
    width: '100%',
    maxHeight: 370,
  },
  form: {
    width: '100%',
    padding: theme.spacing(1),
    '& form': {
      display: 'flex',
      flexDirection: 'column',
    },
  },
  logo: {
    marginBottom: theme.spacing(2),
    width: '24rem',
    [theme.breakpoints.down('xs')]: {
      width: '20rem',
    },
  },
  formFirstSection: {
    display: 'flex',
    justifyContent: 'space-between',
    marginTop: theme.spacing(2),
    marginBottom: theme.spacing(2),
    width: '100%',
    '& div': {
      maxWidth: '12.5rem',
      [theme.breakpoints.down('xs')]: {
        maxWidth: '10rem',
      },
    },
  },
  formButton: {
    height: 50,
    background: theme.palette.primary.main,
    color: theme.palette.secondary.main,
    marginTop: theme.spacing(3),
    transition: 'background 0.5s ease',
    '&:hover': {
      background: theme.palette.primary.dark,
    },
  },
}))

export default styles

但是当我要生成项目构建时，出现此错误

Error occurred prerendering page "/sale/login/styles". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Bcontainer%2C%20cardLogin%2C%20form%2C%20logo%2C%20formFirstSection%2C%20formButton%7D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at O (/app/node_modules/react/cjs/react.production.min.js:17:207)
    at P (/app/node_modules/react/cjs/react.production.min.js:17:355)
    at toArray (/app/node_modules/react/cjs/react.production.min.js:19:177)
    at a.b.render (/app/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:249)
    at a.b.read (/app/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
    at exports.renderToString (/app/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)
    at renderPage (/app/node_modules/next/dist/next-server/server/render.js:54:854)
    at Object.ctx.renderPage (/app/.next/server/pages/_document.js:1488:26)
    at Function.getInitialProps (/app/.next/server/pages/_document.js:789:19)
    at Function.getInitialProps (/app/.next/server/pages/_document.js:1492:83)
info  - Generating static pages (1/4)
info  - Generating static pages (2/4)
info  - Generating static pages (3/4)
info  - Generating static pages (4/4)

> Build error occurred
Error: Export encountered errors on following paths:
    /sale/login/styles
    at /app/node_modules/next/dist/export/index.js:31:1106
    at async Span.traceAsyncFn (/app/node_modules/next/dist/telemetry/trace/trace.js:5:584)
    at async /app/node_modules/next/dist/build/index.js:43:49
    at async Span.traceAsyncFn (/app/node_modules/next/dist/telemetry/trace/trace.js:5:584)
    at async /app/node_modules/next/dist/build/index.js:25:1475
    at async Span.traceAsyncFn (/app/node_modules/next/dist/telemetry/trace/trace.js:5:584)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

如何在 .ts 文件中使用 ui 材质的 makeStyles？

0 个答案: