我是新来的反应者,我只是陷入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,您可以像这样覆盖主题颜色。
任何帮助将不胜感激。