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

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

javascript css reactjs

Javascript 如何在.ts文件中使用ui材质的makeStyles？,javascript,css,reactjs,Javascript,Css,Reactjs,我正在使用nextjs和materialui。我需要将其作为.ts文件中的样式文件，并在组件中使用此文件。当我处于开发模式时，它不会显示任何错误，样式工作得非常完美。但是，当我要生成要宿主的项目构建时，我遇到了一个问题：react无法缩小styles.ts文件中的代码我的组件->页面/sale/login/index.tsx import { FormControl, TextField } from '@material-ui/core'; import Head from 'next/he

我正在使用nextjs和materialui。我需要将其作为.ts文件中的样式文件，并在组件中使用此文件。当我处于开发模式时，它不会显示任何错误，样式工作得非常完美。但是，当我要生成要宿主的项目构建时，我遇到了一个问题：react无法缩小styles.ts文件中的代码

我的组件->页面/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>
    </>
  );
}

但是当我要生成项目构建时，我有一个错误

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

文件。您应该将传输的

.js

传递给minifier。。。

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.