Question

我是新来的反应者，我只是陷入CSS样式中。

我创建了一个简单的react应用程序，其中rwmc包中的多个组件（例如TextField，Grid等）正在主页上呈现。

来源：https://jamesmfriedman.github.io/rmwc/

所有以样式表编写的CSS都将被应用，但是我在'_variables.scss'文件中覆盖了全局主题颜色样式，并且我也将该文件导入了其他样式表。除全局主题颜色外，其他样式也正在组件上应用。我不知道我在做什么错，也许是我从这里得到了答案。

我已经使用create-react-app包创建了react app项目。

这是我的组件之一（AppBar.js）。您会注意到导入的名为“ AppHeaderBar.css”的样式表

import React from 'react';
import ReactDOM from 'react-dom';

import '../styles/AppHeaderBar.scss';

import {
  TopAppBar,
  TopAppBarRow,
  TopAppBarSection,
  TopAppBarNavigationIcon,
  TopAppBarActionItem,
  TopAppBarTitle,
  SimpleTopAppBar,
  TopAppBarFixedAdjust
} from '@rmwc/top-app-bar';


class AppBar extends React.Component {
    render() {
        return (
            <div>
                <TopAppBar alignStart dense={true} fixed={true} >
                  <TopAppBarRow fixed={true} dense={true}>
                    <TopAppBarSection alignStart>
                        <TopAppBarNavigationIcon data-qa="navigationMenu" icon="menu" onClick = {()=>this.props.toggle()}/>
                        <TopAppBarTitle>Workforce</TopAppBarTitle>
                    </TopAppBarSection> 
                  </TopAppBarRow>
                </TopAppBar>
                <TopAppBarFixedAdjust dense={true}/>
            </div>
               )
    }
}

export default AppBar;

这是我的AppHeaderBar.css，请注意，正在应用mdc.top-app-bar.css中定义的样式，而不是从'./_common'

@import './_common';
@import '~@material/top-app-bar/dist/mdc.top-app-bar.css';

这是_common.scss文件，此文件仅导入_variables.scss文件

@import './_variables';

这是._variables.scss文件。

$mdc-theme-primary: #5d1049;
$mdc-theme-secondary: #fa3336;
$mdc-theme-error: #b00020;
$mdc-theme-background: #fff;
$mdc-theme-surface: #fff;
$mdc-theme-on-primary: rgba(255, 255, 255, 1);
$mdc-theme-on-secondary: rgba(255, 255, 255, 1);
$mdc-theme-on-surface: rgba(0, 0, 0, 0.87);
$mdc-theme-on-error: #fff;
$mdc-theme-text-primary-on-background: rgba(0, 0, 0, 0.87);
$mdc-theme-text-secondary-on-background: rgba(0, 0, 0, 0.54);
$mdc-theme-text-hint-on-background: rgba(0, 0, 0, 0.38);
$mdc-theme-text-disabled-on-background: rgba(0, 0, 0, 0.38);
$mdc-theme-text-icon-on-background: rgba(0, 0, 0, 0.38);
$mdc-theme-text-primary-on-light: rgba(0, 0, 0, 0.87);
$mdc-theme-text-secondary-on-light: rgba(0, 0, 0, 0.54);
$mdc-theme-text-hint-on-light: rgba(0, 0, 0, 0.38);
$mdc-theme-text-disabled-on-light: rgba(0, 0, 0, 0.38);
$mdc-theme-text-icon-on-light: rgba(0, 0, 0, 0.38);
$mdc-theme-text-primary-on-dark: white;
$mdc-theme-text-secondary-on-dark: rgba(255, 255, 255, 0.7);
$mdc-theme-text-hint-on-dark: rgba(255, 255, 255, 0.5);
$mdc-theme-text-disabled-on-dark: rgba(255, 255, 255, 0.5);
$mdc-theme-text-icon-on-dark: rgba(255, 255, 255, 0.5);

您能帮我在这里做错什么吗？我从这里学习 https://codelabs.developers.google.com/codelabs/mdc-103-web/#2，您可以像这样覆盖主题颜色。

任何帮助将不胜感激。

为什么CSS没有被应用到React（RMWC）中的组件上？

0 个答案: