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

我正在扩展由其他人构建的Next.js（React）项目，该项目使用.scss文件（SASS）进行样式设置。这就是正在讨论的项目

现在，我正在使用

@aws-amplify/ui-react

向项目添加身份验证流。一切正常，但我想自定义UI样式。我在文档中发现，我可以通过globals.css中的

：root

，这样做：

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

此处的文档：

除了基础知识，我对SASS几乎一无所知。如何在

：root

中设置这些变量

编辑更多详细信息

这是我的

next.config.js

：

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

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

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;

---

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

包括页面中的样式。最简单的方法是创建一个新的SCSS文件并将其包含在自定义文件中

默认情况下，-您只需要安装sass npm包，可能不需要自定义的next.config。这可能是你的问题之一

文件-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也可以在为：root定义样式后设置样式-如果是这种情况，则需要确定自定义样式的范围，使其优先于默认的Amplify CSS变量。要做到这一点，请记住，CSS规则比上面的示例更具体：root

放大也可以让你

可以瞄准的放大元件有

• 放大验证器
• 放大登录
• 放大确认登录
• 扩大注册
• 放大确认注册
• 放大忘记的密码
• 放大需要新密码
• 放大验证触点
• 放大totp设置

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

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

导入'path/to/global.scss'；
常量App=（{Component，pageProps}）=>；
导出默认应用程序；

全局变量（相当于

：root

变量）只需使用此行即可创建

$color = #c0ff33 !important;

内容可以是css和部分sass中可用的任何内容。 对于大型项目，创建一个

variables.scss

文件并在其中包含所有这些变量声明对于一次更改多个变量非常有用。要包含此文件，只需在文件顶部执行

@import./variables.scss“

---

希望这有帮助！祝你在你的努力中好运

您只需将

：root

和CSS变量直接用于Sass即可。@juliomalves我一直在阅读有关这方面的内容，这里他们给出了一个示例：我尝试使用

：root

配置创建一个scss文件，但似乎没有任何变化（我在root中更改的变量保持不变），我尝试了这一点，但这些变量似乎没有被取代。当我在元素检查器中检查样式时，例如，

--amplify primary color

会保留默认值

#ff9900

。我不确定我做错了什么。（我已经编辑了我的问题以包含更多细节）请参阅更新的帖子

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

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

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

$color = #c0ff33 !important;