>

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);

  • 답변 # 1

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

    패키지 이름이 작동하기 전에 ~ 추가하기

관련 자료

  • 이전 javascript - 표면 그래프의 색상을 변경 visjs?
  • 다음 php - 두 개의 열을 선택하여 SQL에서 조인의 반대?