@aws-amplify/ui-react 如果我的项目使用 SASS，如何自定义 UI？

Question

我正在扩展由其他人构建的 Next.js (React) 项目，该项目使用 .scss 文件 (SASS) 进行样式设置。 这是有问题的项目https://github.com/codebushi/nextjs-starter-dimension

现在，我正在使用@aws-amplify/ui-react向项目添加身份验证流程。 一切正常，但我想自定义 UI 样式。 我在文档中发现我可以通过 globals.css 中的:root来做到这一点，如下所示：

:root {
  --amplify-primary-color: #ff6347;
  --amplify-primary-tint: #ff7359;
  --amplify-primary-shade: #e0573e;
}

此处的文档： https://docs.amplify.aws/ui/customization/theming/q/framework/react

除了基础知识，我对 SASS 几乎一无所知。 我将如何做相当于在:root中设置这些变量？

编辑更多细节

这是我的next.config.js ：

module.exports = {
  webpack: (config, { dev }) => {
    config.module.rules.push(
      {
        test: /\.scss$/,
        use: ['raw-loader', 'sass-loader']
      }
    )
    return config
  }
}

这是我的身份验证页面，其中定义了 Amplify 元素：

import { useState, useEffect } from 'react'
import { AuthState, onAuthUIStateChange } from '@aws-amplify/ui-components';
import { AmplifyAuthenticator, AmplifyAuthContainer, AmplifySignUp, AmplifySignIn, AmplifySignOut } from '@aws-amplify/ui-react';
import Router from 'next/router'

const Auth = (props) => {
  const [authState, setAuthState] = useState();
  const [user, setUser] = useState();

  useEffect(() => {
      return onAuthUIStateChange((nextAuthState, authData) => {
          setAuthState(nextAuthState);
          setUser(authData);
          //console.log(`authData: ${JSON.stringify(authData, null, 2)}`);
      });
  }, []);

  if (authState === AuthState.SignedIn && user) {
    Router.push('https://mywebsite')
    return <p>Redirecting...</p>
  }

  return (
    <AmplifyAuthContainer>
        <AmplifyAuthenticator usernameAlias="email">
          <AmplifySignUp
            slot="sign-up"
            usernameAlias="email"
            formFields={[
              {
                type: "email",
                label: "Email Address *",
                placeholder: "Enter your email address",
                inputProps: { required: true },
              },
              {
                type: "password",
                label: "Password *",
                placeholder: "Enter your password",
                inputProps: { required: true },
              },
            ]} 
          />
          <AmplifySignIn slot="sign-in" usernameAlias="email" />
        </AmplifyAuthenticator>
    </AmplifyAuthContainer>
  );
}

export default Auth;

根据 Sean W 下面的回答，我已经尝试使用以下方法创建 _app.js：

import '../styles/global.scss'

const App = ({ Component, pageProps }) => {
  return <Component {...pageProps} />
}

export default App;

与global.scss ：

:root {
  --amplify-primary-color: #ff6347;
  --amplify-primary-tint: #ff7359;
  --amplify-primary-shade: #e0573e;
}

但是 CSS 变量似乎没有被替换。

Answer 1

在您的页面中包含 styles。 最简单的方法是创建一个新的 SCSS 文件并将其包含在自定义_app.js中。

默认情况下， Next 支持 SASS - 您只需要安装 sass npm ZEFE90A8E604A7C840D8Z8D03 并可能不需要自定义。 这可能是您的问题之一。

文件 - global.scss -

:root{
  --amplify-primary-color: #ff6347;
  --amplify-primary-shade: #e0573e;
}

//scoped & redeclared to an element with id #__next
:root #__next {
  --amplify-primary-color: #ff6347;
  --amplify-primary-shade: #e0573e;
}

Amplify could also be setting setting styles after you have already defined them for the:root - if this is the case you will need to scope your custom styles to take precedence over the default Amplify CSS variables. 为此 - 在 CSS 规则中重新声明它们，该规则比:root更具体，如上面的示例 - 牢记优先顺序

Amplify 还允许您直接定位组件。

amplify-authenticator {
  --amplify-primary-color: #ff6347;
  background: var(--amplify-primary-color);
  padding: 5px;
}

// scoped & redeclared 
:root #__next amplify-sign-in{
  --amplify-primary-color: #ff6347;
}

可以针对的放大元素是

• 放大认证器
• 放大登录
• 放大确认登录
• 放大注册
• 放大确认注册
• 放大忘记密码
• 放大需要新密码
• 放大-验证-联系
• 放大 totp 设置

导入您的文件 - pages/_app.js

import 'path/to/global.scss';
const App = ({ Component, pageProps }) => <Component {...pageProps} />;
export default App;

Answer 2

使用这一行可以简单地创建全局变量（相当于:root变量）。

$color = #c0ff33 !important;

内容可以是 css 和部分 sass 中可用的任何内容。 对于大型项目，创建variables.scss文件并在其中包含所有这些变量声明对于一次更改多个变量确实很有帮助。 要包含此文件，只需在文件顶部执行@import "./variables.scss" 。

希望这可以帮助！ 祝你在你时髦的努力中好运！