React组件样式化方法

Question

I have this following component -

import React from 'react';
import {Route, Link} from 'react-router-dom'
import Error from './Error'

class NavigationBar extends React.Component {
    render() {
        return (
            <div className="nav">
                <nav className="navbar navbar-inverse bg-inverse">
                    <ul className="nav navbar-nav">
                        <li className="nav-item">
                            <Link to={"/data"} className="nav-link"> Data </Link>
                        </li>
                        <li className="nav-item">
                            <Link to={"/analysis"} className="nav-link"> Analysis </Link>
                        </li>
                        <li className="nav-item">
                            <Link to={"/Monitor"} className="nav-link"> Monitor </Link>
                        </li>
                    </ul>
                </nav>
                <Route path={"/webiks/:user"} component={Error}/>
            </div>
        );
    }
}

export default NavigationBar;

In addition i added a nav.css file to index.html in order to make some changes to the boostrap styling.

The problem is that when entering the "webkis/:user" url the style only boostrap styling without the changes of the nav.css file. If one can explaing the reason , and also to mention some of the common methods for styling components (which is NOT an inline styling).

Thanks.

Answer 1

将nav.css与NavigationBar.js放在同一文件夹中，然后在导入列表中添加以下行： import './nav.css'