2

https://www.npmjs.com/package/react-notifications

我试图让它在我的项目中工作。

如果我从演示（app.css）直接链接到CSS，它可以工作，但根据文档我应该能够做到这一点......

import 'react-notifications/lib/notifications.css';

如果我在演示中使用 app.css 中的代码将这一行更改为本地 .css 文件的副本，则它可以正常工作，只是找不到字体。我不应该这样做，对吧？

它基本上不会在页面底部呈现所有 CSS 效果。 我不确定为什么它没有正确导入 CSS？

这是我的 App.js 文件

import React, { Component } from "react";
import { withRouter } from "react-router-dom";

import Routes from "./routes/Routes";
import Footer from "./components/Footer";
import Header from "./components/Header";

//The following below disables the warning since BootstrapSlider won't be used but he css is needed
/* eslint-disable no-unused-vars*/

// import { authUser, signOutUser } from "./libs/awsLib";

import "./assets/scss/index.scss";
import 'react-notifications/lib/notifications.css';

import {NotificationContainer} from 'react-notifications';

class App extends Component {

  constructor(props) {
    super(props);
    console.log(this.props.theme);
    this.state = {
      isAuthenticated: false,
      isAuthenticating: true
    };
  }

  //This verifies that the session was read first for login status before rendering
  //This function is part of the React Event Library
  //https://reactjs.org/docs/react-component.html
  async componentDidMount() {
    try {
      // if (await authUser()) {
      if (true) {
        // this.userHasAuthenticated(true);
      }
    }
    catch (e) {
      alert(e);
    }

    this.setState({ isAuthenticating: false });
  }

  //This allows anything with access to App to set authenticated to true
  userHasAuthenticated = authenticated => {
    this.setState({ isAuthenticated: authenticated });
  }

  handleLogout = event => {
    // signOutUser(); //This clears the actual session/localstorage out
    this.userHasAuthenticated(false);//This clears the App state
    //We have access to <Route> properties and functions thanks to withRouter()
    this.props.history.push("/login");
  }

  render() {
    const childProps = {
      isAuthenticated: this.state.isAuthenticated,
      userHasAuthenticated: this.userHasAuthenticated,
      theme: this.props.theme
    };
    return (
      !this.state.isAuthenticating &&
      <div className="App container">
        <Header theme={this.props.theme} isAuthenticated={this.state.isAuthenticated} handleLogout={this.handleLogout} />
        <Routes childProps={childProps} />
        <Footer theme={this.props.theme}/>
        <NotificationContainer/>
      </div>
    );
  }
}

//withRouter will give access to Route class properties/functions
//https://reacttraining.com/react-router/web/api/withRouter
export default withRouter(App);
4

1 回答 1

0

@import '~react-notifications-component/dist/theme.css';

在库名称之前添加一个 ~ 对我有用。

于 2018-11-07T13:52:14.067 回答